[分享]css中 适合不同浏览器

CSS（Cascading Style Sheets，层叠样式表）是一种用于网页设计的样式表语言。因为不同的浏览器对CSS的解析存在差异，导致网页在不同的浏览器中显示效果不一致。如何适配不同的浏览器呢...

CSS（Cascading Style Sheets，层叠样式表）是一种用于网页设计的样式表语言。因为不同的浏览器对CSS的解析存在差异，导致网页在不同的浏览器中显示效果不一致。如何适配不同的浏览器呢？

首先，我们需要了解各个浏览器之间的差异。CSS的兼容性问题主要有两个方面：CSS选择器兼容性和CSS属性兼容性。下面是一个例子：

p {color: red; }
p.test {color: blue; } 

在IE6及以下的浏览器中，第二个选择器不会生效，而在其他浏览器中，第二个选择器会覆盖掉第一个选择器。

为了解决这种问题，我们可以使用CSS Hack或者CSS条件注释。CSS Hack是指利用CSS选择器的差异性，通过编写特定的CSS选择器以达到适配不同浏览器的目的。以下是一些CSS Hack的示例：

/*适用于IE6及以下浏览器*/
*html body { color:red; }

/*适用于IE7*/
*:first-child+html body { color:red; }

/*适用于其他浏览器*/
body:nth-of-type(n) { color:red; } 

而CSS条件注释则是在HTML文档中嵌入特定的注释语句，用来指定不同版本的IE浏览器对应的CSS样式表。以下是一个CSS条件注释的示例：

<!--[if lte IE 8]>
    <link href="ie8.css" rel="stylesheet" type="text/css">
<![endif]--> 

除此之外，我们还可以使用CSS Reset或Normalize.css来重置或规范化不同浏览器的默认样式，以便更好地控制样式表。在使用Reset或Normalize.css时，需要注意选择合适的版本和权衡样式的重置程度。

总之，为了解决CSS在不同浏览器中出现的兼容性问题，我们需要了解不同浏览器之间的差异，并采取相应的措施进行适配。