Question

我正在使用 box-sizing：border-box 模型。当内嵌块元素（容器）中包含内嵌块元素内嵌块元素时，容器太宽Internet Explorer 9.在FF 10.0，Chrome 17.0，Opera 11.5和Safari 5.1.2中按预期工作。

See this jsfiddle

顺便说一下，宽度而不是 min-width 就像魅力一样。

有什么想法吗？

Answer 1

当你用谷歌搜索与IE 8类似的问题时，你遇到了你的帖子，虽然IE 8支持盒子大小和最小高度/宽度，从我的测试来看，似乎IE 8在使用min-height /时忽略了边框同一元素的宽度

E.g。

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

IE 8高度 = 28px， Chrome 20高度 = 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;

 }

Answer 2

我的问题

我看到在 IE8 开发人员工具检查器中应用了border-box值。因此，我知道border-box正在工作，尤其是在设置width（或height）时的预期效果。但由于我使用最小高度作为我的身高（并且OP使用最小宽度），我的最小值不起作用。因此问题是：

IE的最小高度/最小宽度不考虑边框

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

<div class="box">Awesome Box</div>

IE8：260px（填充顶部30px，填充底部30px）。不起作用。
FireFox：200px高度。（边界框中的最小因素）。作品。

我的解决方案：

不要将填充放在与放置最小值和边框相同的元素上（如果将它们分开，则可能不再需要边框大小）。

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

<div class="box">
    <div class="box-inner">Awesome Box</div>
</div>

Answer 3

我没有这方面的解决方案，但在谷歌搜索修复时遇到了问题。幸运的是，在我的情况下，我现在可以设置宽度而不是最小宽度，虽然这可能是将来的问题。

无论如何，我只是想补充一点，如果min-width元素及其容器都是浮动而不是内联块，则存在同样的问题。

以下是使用float: left显示原始小提琴的更新：http://jsfiddle.net/5Ng7k/24/

IE 9中的框大小边框和最小宽度问题

3 个答案:

我的问题

我的解决方案：