2013-07-03 8 views
6

max-width:-webkit-fit-content;のハックがありますか?max-width:-webkit-fit-contentつまり8相当ですか?

子divを取得しようとすると親の全体の幅を占めることはなく、これはff、chrome、safariでうまくいきます。それは8と同様に動作するようにいくつかのハックが望んでいる。挙動を示す

フィドル:私はIE8に必要な動作のためのhttp://jsfiddle.net/XtZq9/ コード:

#wrap { 
    background-color: aqua; 
    width:300px; 
    height: 50px; 
    padding-top: 1px; 
} 

.textbox { 
    background-color: yellow; 
    max-width: intrinsic; 
    max-width:-webkit-fit-content; 
    max-width: -moz-max-content; 
    margin-top: 2px; 
} 

<div id="wrap"> 
    <div class="textbox"> 
     Here is some text 
    </div> 
    <div class="textbox"> 
     Here is other, longer, text 
    </div> 
</div> 
+0

多くのコードを書く必要はありません。なぜなら、ie8のためにそのコンテナに%幅を単に設定する条件付きコメントを適用できないのですか? – relic

+0

コンテナの幅を内容に応じて動的にしたいので、静的な幅の値を設定したくない。インクルードするコードはあまりありませんが、インクルードするために質問を追加してください。 http://jsfiddle.net/XtZq9/ – HelloWorld

+0

@HelloWorld: '.textbox {float:left;} .textbox + * {clear:left;}'は本質的には小さなハックです同じことをしてください:http://jsfiddle.net/XtZq9/1/ - 私はIE8でこれをテストすることはできません。私は現在Windows PCではないからです。 – Zeta

答えて

3

私はあなたの要素を浮遊していると考えることができ、最も近いです。厳密には似ていませんが、おそらく十分に似ています;)余分なマージンを設定する必要がありますが、これは条件付きスタイルシートには問題ありません。まだ

​​

Your modified fiddle

+0

ありがとうございます – HelloWorld

+0

@HelloWorldよろしくお願いします。 – Christoph

4

を見続ける、私は単に

display: table; 

代わりの

width: fit-content; 

空白での問題についてただし、リンクをチェックを使用することができます学びました。私の場合は当てはまりません。の幅をfit:と置き換えます。ディスプレイ:テーブルは簡単に問題を解決しました。

関連する問題