2015年02月18日

IE8で max-width: calc(100%-100px); をCSSだけで実現する方法


「max-width calc IE8」でググると
ざっくり固定値で指定しろ(max-width: 95%;)としか出てきません(涙)

これで結構苦労した記憶があるので
私が見つけたやり方を記録しておきます。


ポイントは次の2つです。
  1. block要素の幅が最大化されること
  2. white-space: nowrap を使うとinline要素が改行されないこと
1 で max-width を指定したい要素を括ってmarginを指定します
#width:100%;とか指定してはだめ
隣に並べたい要素は 2 を使って配置します


【サンプルソースコード】
<div>
    <div style="margin-right: 100px;
                     display: block;
                     white-space: nowrap;">
        <div style="width: 2000px;  /* max-widthが効いているか確かめてます */
                         max-width: 100%;
                         white-space: normal;
                         display: inline-block;">可変領域</div>
        <div style="display: inline-block;
                         width: 100px;
                         white-space: normal;”>固定領域</div>
      </div>
</div>
※ソースがテキストで見難いと思いますが後で直しますのでご了承ください。


かなりトリッキーな手法ですが悪しからず。



ラベル:技術 IE CSS
posted by きっちょむ at 11:37| Comment(0) | 技術 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。