css 宽度 兼容 |字体滑动样式css

在一些旧版浏览器中，CSS宽度可以被解读为包括了padding和border。这就意味着，如果你想要得到一个100px宽的盒子，在IE盒子模型下你需要设置为：宽度60px+padding20px+border10px=100px。而在标准盒子模型下则只需要设置宽度为100px即可。

.box {
width: 100px;
padding: 20px;
border: 10px solid #333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; 
}

在这个样例中，大家通过实现border-box方案解决了这个问题，即如果设置盒子模型为border-box模式，CSS宽度属性就会被解读为包含padding和border。这就消除了旧版浏览器和移动设备不同盒子模型造成的兼容性问题。

还有一点需要注意的是，CSS宽度和百分比也有兼容性问题。在Web设计中，CSS宽度通常被设置为百分比，但是在某些浏览器中，百分比并不会被正确地解释。如果你需要实现正确的百分比宽度，建议使用JS编写代码来实现。

CSS宽度兼容问题在Web设计中非常常见，但是只要大家了解了这些问题，就可以在设计中找到相应的解决方案。尽可能考虑到兼容性问题，才能让大家的设计在不同平台和浏览器下都能得到良好的展示效果。