14

box-sizing：border-boxモデルを使用しています。最小幅のインラインブロック要素がインラインブロック要素（コンテナー）に含まれている場合、Internet Explorer9ではコンテナーの幅が広すぎます。FF10.0、Chrome 17.0、Opera 11.5、およびSafari5.1.2で期待どおりに機能します。 。

このjsfiddleを参照してください

ちなみに、min-widthではなくwidthが魅力のように機能します。

何か案は？

4

3 に答える 3

13

こんにちは、IE 8で同様の問題をグーグルで検索したときにあなたの投稿に出くわしましたが、IE 8はボックスのサイズ設定と最小の高さ/幅をサポートしていますが、私のテストから、IE8は最小の高さ/幅を使用するときにボーダーボックスを無視するようです同じ要素

例えば

#box {
   min-height: 20px;
   padding:4px;
   box-sizing:border-box;
}

IE8の高さ=28px、Chrome20の高さ=20px;

cssブラウザセレクターを使用したソリューションhttp://rafael.adm.br/css_browser_selector/

#box {
       min-height: 20px;
       padding:4px;
       box-sizing:border-box;
  }

 .ie8 #box, .ie9 #box {
       min-height: 12px;
       padding:4px;

 }
于 2012-07-30T00:32:54.297 に答える
2

私の問題

IE8開発ツールインスペクターでボーダーボックスの値が適用されているのがわかります。したがって、特に幅（または高さ）が設定されている場合は、border-boxが機能していることがわかります。しかし、私は身長にmin-heightを使用している（そしてOPはmin-widthを使用している）ので、私のmin値は機能していません。したがって、問題は次のとおりです。

IEの最小高さ/最小幅はボーダーボックスを考慮していません

.box {
     padding: 30px;
     box-sizing: border-box;
     min-height: 200px;
}    

<div class="box">Awesome Box</div>
  • IE8：260px（パディング上部から30px、パディング下部から30px）。動作しません。
  • FireFox：高さ200px。（ボーダーボックスの最小係数）。動作します。

私の解決策：

min-valuesとborder-boxを配置するのと同じ要素にパディングを配置しないでください-（これらを分離すると、border-boxのサイズ設定が不要になる場合があります）。

.box {
     box-sizing: border-box;
     min-height: 200px;
}
.box-inner {
     padding: 30px;
}  

<div class="box">
    <div class="box-inner">Awesome Box</div>
</div>
于 2015-01-09T07:19:05.857 に答える
0

私にはこれに対する解決策がありませんが、自分で修正を探しているときに質問に出くわしました。幸いなことに、私の場合は、最小幅ではなく幅を設定することで今のところうまくいくことができますが、将来的には問題になる可能性があります。

とにかく、min-width要素とそのコンテナの両方がインラインブロックではなくフロートされている場合にも同じ問題が存在することを付け加えたいと思います。

これが元のフィドルのアップデートで、次のように表示されます：http float: left: //jsfiddle.net/5Ng7k/24/

于 2013-09-18T01:07:01.400 に答える