css不同浏览器之间样式不同

在网站开发中，为了美化和布局网页，CSS是必不可少的一部分。然而，在不同浏览器中，同一段CSS代码的显示效果却可能存在巨大的差异，这给前端开发带来了巨大的困扰。

其实，造成差异的原因非常简单：因为不同的浏览器有不同的CSS解析引擎，它们对CSS的解析是根据自己的标准和规则来进行的，这就导致同一段CSS在不同浏览器里的显示效果不同。

/* 以下是一段CSS代码 */

p{
  color: red;
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
  text-shadow: 1px 1px #999;
} 

在Chrome浏览器中，这段CSS代码的效果可能是这样的：

p{
  color: red;
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
  text-shadow: 1px 1px #999;
} 

然而，在Firefox浏览器中，这段代码的效果却可能是这样的：

p{
  color: red;
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
  -moz-text-shadow: 1px 1px #999;
  text-shadow: 1px 1px #999;
} 

可以看到，在Firefox浏览器中，除了text-shadow属性需要加上-moz-前缀以外，其它的属性和值和Chrome浏览器是一样的。

另外，还有一些属性在不同浏览器中会存在不同的默认值，比如line-height、padding等等，如果不加以注意，会出现布局和排版不一致的情况。

解决CSS在不同浏览器中显示不一致的方法有很多，比如浏览器嗅探、使用reset.css文件等等。但不管怎样，我们在编写CSS代码时，一定要注意不同浏览器的兼容性，确保网页在不同浏览器中都能够正常显示。