IE 8 下的 box-sizing 和 min-* 属性

Posted 2020-07-26 没事看看电影

在非 IE 浏览器中，默认情况下 width 属性指的是内容区域(content)的宽度。 
IE 6+ 中，如果浏览器以标准模型渲染，和非 IE 浏览器的表现是一致的；如果浏览器以怪癖模式渲染，则 width 指的是外 border 的宽度。

通常而言，网页头部添加了 <!DOCTYPE> ，则 IE 会以标准模式（或者接近标准）进行渲染，否则以怪癖模式渲染。

现代浏览器，包括 IE8 在内，都支持一个属性：box-sizing，这个属性，有两个可选值：border-box | content-box，普通元素默认情况下为 content-box。 
box-sizing: content-box; 的元素的 width 属性指的是边框的区域的宽度，正好和 IE 怪癖模式下的表现一致。于是，合理地使用 box-sizing: content-box; 在很多时候可以避免加加减减，或者额外添加新的一层元素。

对于 <input> 元素而言，box-sizing 默认情况下取值是 border-box 。也就是说，在 IE 8、Chrome 等浏览器中，你给 input 指定多少 width，它看上去就是多宽。(除非你的width太窄了)

max-width 和 min-width 就不多说了。

我的表单中有一个按钮，通常情况下为了美观需要固定一个宽度：

.button{
    width: 260px;
}

但是由于网页需要用到多语言，有的文字可能很长，长到超出按钮的默认长度，所以改成下面的样式，当文字过长，按钮会自动拉长：

.button{
    min-width: 260px;
}

其他浏览器中都没有问题，拿到 IE8 （最低支持 IE 8）中发现，按钮的长度好像变长了。用 Chrome 等查看，下面的黑色方块和按钮是一样宽的。而IE 8 下按钮要更宽。

.button{
  padding: 8px 20px;
  min-width: 300px;
}

 

IE8 里面看上去是什么样子呢？如果我们把按钮的 box-sizing 设为 content-box，在 Chrome 里面的表现，就是 IE8 里面看到的的样子。

因此，如果 IE 8 中元素宽度是 min-width 决定的，则浏览器直接忽略了 box-sizing: border-box。