14

我正在使用box-sizing:border-box模型。当具有最小宽度的 inline- block元素包含在inline-block元素（容器）中时，该容器在 Internet Explorer 9 中太宽。在 FF 10.0、Chrome 17.0、Opera 11.5 和 Safari 5.1.2 中按预期工作.

看到这个jsfiddle

顺便说一句，width而不是min-width就像一个魅力。

有任何想法吗？

4

3 回答 3

13

嗨，当谷歌搜索 IE 8 的类似问题时遇到了你的帖子，虽然 IE 8 支持 box-sizing 和 min-height/width，但从我的测试来看，似乎 IE 8 在使用 min-height/width 时忽略了边框框相同的元素

例如

#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;

 }
于 2012-07-30T00:32:54.297 回答
2

我的问题

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

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

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

<div class="box">Awesome Box</div>
  • IE8：260 像素（距顶部填充 30 像素，距底部填充 30 像素）。不工作。
  • 火狐：200px 高度。（边界框中的最小值）。作品。

我的解决方案：

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

.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 元素及其容器都是浮动的而不是 inline-block ，则存在同样的问题。

这是对原始小提琴的更新：http float: left: //jsfiddle.net/5Ng7k/24/

于 2013-09-18T01:07:01.400 回答