[分享]css个浏览器差异

CSS样式表的编写离不开各种浏览器的支持和兼容。不同的浏览器对CSS的支持程度是不同的，同样的CSS样式，在不同的浏览器中可能表现出不同的效果。解决这个问题的关键在于了解不同浏览器对CSS的差异。 一...

CSS样式表的编写离不开各种浏览器的支持和兼容。不同的浏览器对CSS的支持程度是不同的，同样的CSS样式，在不同的浏览器中可能表现出不同的效果。解决这个问题的关键在于了解不同浏览器对CSS的差异。
一、CSS盒模型
CSS盒模型是一个元素的所有内容包括内边距、边框和外边距的总和。然而，有些浏览器的box-sizing属性默认值不同。例如，Firefox和IE8及以下版本的默认值为content-box，而相对较新的浏览器（Chrome、Safari、Opera和IE9及更高版本）的默认值为border-box。因此，在编写CSS时，需要确切地指定CSS盒模型的box-sizing属性，以免造成混乱。
代码示例：

.box1 {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid #000;
    margin: 30px;
    box-sizing: content-box;
}
<br>
.box2 {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid #000;
    margin: 30px;
    box-sizing: border-box;
} 

二、CSS样式的前缀
在浏览器中对某些CSS属性的支持不同，为了满足各自的浏览器和版本，一些CSS属性在不同浏览器中需要使用不同的前缀。例如，Webkit浏览器的前缀是-webkit，而Firefox浏览器的前缀是-moz等等。
代码示例：

div {
  -webkit-border-radius: 10px;
          border-radius: 10px;
} 

三、CSS样式的兼容
除了不同的前缀之外，不同浏览器之间有些CSS属性的支持是有区别的。这时候就需要为不同的浏览器设置不同的样式。这可以通过特定的浏览器判断动态的加入或修改CSS样式。
代码示例：

var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') != -1) {
  document.styleSheets[0].addRule('.example', 'color: #000;');
} else {
  document.styleSheets[0].addRule('.example', 'color: #fff;');
} 

综上所述，CSS在各个浏览器中的兼容性是非常重要的。了解浏览器在CSS方面存在的差异，并灵活地运用适当的解决方案，才能最大程度地保证Web页面的兼容性和好的视觉效果。