为了让各浏览器有同样的显示效果，就不能不对CSS做兼容性处理，这时我们就会用到CSS HACK。当然在这篇文章中我们只谈现在使用率最高的IE6、IE7、IE8和FF，至于IE6以下版本已OP、SF在这此先不详细说明。新手看了这片文章一定会有所收获，而高手们路过一下就可以了
1、可进行浏览器兼容性重复定义
首先来看一下示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个CSS兼容性问题的示例</title>
<style type="text/css">
.test{
width:500px;
height:200px;
background-color:orange; /*IE6、IE7、IE8和FF支持*/
*background-color:blue; /*IE7支持*/
_background-color:red; /*IE6支持*/
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
在看看效果：
这是在IE6中的效果
这是在IE7中的效果
这是在IE8和FF中的效果
为什么会这样呢？我解释一下，首先background-color:orange;IE6、IE7、IE8和FF都支持，但是由于程序运行时按照顺序执行，后面设置的属性会覆盖前面的属性，后面两个*background-color:blue; 和_background-color:red;可是IE6不支持“*”号只支持“-”号，所以IE6最终读取的_background-color:red;。
同样的道理，IE7能够识别“*”号，但是不能识别“-”号，所以在IE7下运行的效果是*background-color:blue;IE8和FF“*”号和“-”号都不能识别所以最终读取为background-color:orange;
2、几个浏览器对实际像素的解释
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
3、鼠标手势问题
FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer
4、单位的问题
FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位
5、消除ul、ol等列表的缩进
消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效
6、超链接的CSS样式设置
对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
这样可以避免一些访问过后的超链接就不具备hover和active样式了
7、浮动后IE6解释外边距为实际边距的双倍
解决办法：加上display:inline
8、自动撑开
支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}
9、IE6由于默认行高问题无法定义1px左右高度的容器
解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px
分享到：
相关推荐
然而，由于各个浏览器之间的实现差异，CSS的兼容性问题常常成为开发者们面临的一大挑战。尤其是IE（Internet Explorer）和Firefox，它们在解析CSS规则时有着不同的理解和执行方式。本篇文章将深入探讨CSS在不同...
CSS浏览器兼容问题，解决各个浏览器中css不兼容的问题。
《CSS-浏览器兼容实战》一书深入探讨了CSS在不同浏览器中的兼容性问题及其解决方案。CSS，即层叠样式表，是用于控制HTML或XML文档样式的计算机语言。在网页设计中，CSS起着至关重要的作用，尤其在实现响应式布局和...
总的来说，解决CSS和JavaScript的浏览器兼容问题需要开发者对各种浏览器的特性有深入理解，并善于运用工具和技巧进行调试和优化。如使用Firebug、Web Developer、DebugBar等开发工具可以帮助开发者快速定位和解决...
接着，我们来看CSS的各个部分如何与浏览器兼容性关联。CSS包括选择器、盒模型、布局模式、动画和过渡等大量特性。例如，CSS3引入了伪类选择器`:nth-child()`，在旧版IE浏览器中可能无法识别；`Flexbox`布局在早期...
本文将深入探讨如何使用CSS来解决浏览器兼容问题。 首先，我们来看一个关键的CSS技巧：`!important`。`!important`是CSS1规范中的一个特性，其目的是提升样式规则的优先级。当一个CSS规则后面跟上了`!important`，...
总之，处理CSS浏览器兼容性问题需要深入理解各个浏览器的解析机制和特性，并熟练运用各种兼容性写法。通过适当的选择器、属性hack以及媒体查询，可以有效地确保样式在多种浏览器中表现一致，提升用户体验。
在网页设计中，由于各个浏览器（尤其是Internet Explorer的早期版本）对CSS的实现存在差异，导致开发者需要采取一些特定的方法来解决浏览器兼容性问题。本篇文章主要探讨了针对IE6、IE7、IE8、IE9以及Firefox（FF）...
许多CSS3属性在初期为实验性质，各个浏览器厂商使用了自己的私有前缀，如 `-webkit-` (Chrome, Safari), `-moz-` (Firefox), `-ms-` (Internet Explorer), `-o-` (Opera)。为确保跨浏览器兼容性，需要为这些新特性...
【CSS浏览器兼容问题详解】 在Web开发中，CSS（层叠样式表）是用于控制网页布局和样式的语言。然而，不同的浏览器对CSS的支持程度和解析方式可能存在差异，导致兼容性问题。以下是一些常见的CSS在不同浏览器，尤其...
### div+css浏览器兼容问题解决方法 在网页开发过程中，经常遇到的一个问题是不同浏览器对CSS的支持程度不一，导致页面布局出现差异。特别是在早期的Web 2.0过渡时期，如何确保网页在IE7、IE6以及Firefox等浏览器中...
解决浏览器兼容问题的一种常见方法是使用CSS Hack。CSS Hack是通过特定的语法结构来针对不同浏览器进行样式设定。例如，对于IE6和FF的区别，可以写为`background:orange;*background:blue;`，其中星号(*)前缀的样式...
综上所述，CSS3的`border-image`是一个创新且灵活的属性，但因为浏览器兼容性的限制，实际应用时需要额外的适配工作。在考虑使用这个特性时，需要充分了解其工作原理和潜在问题，才能充分发挥其潜力。
浏览器兼容性问题一直是Web开发中的一个关键挑战，尤其是在CSS样式表现方面。由于不同的浏览器使用了不同的渲染引擎（或称为内核），例如Mozilla Firefox使用Gecko，Internet Explorer使用Trident，Opera使用Presto...
由于各个浏览器对CSS规范的实现不完全相同，存在一些兼容性问题，开发者可以通过特定的语法结构或者属性值来让特定的浏览器识别并应用这些样式。Safari，尤其是基于WebKit内核的Safari和Chrome浏览器，它们在处理...
然而，不同浏览器对CSS的支持程度不尽相同，这就导致了在实际开发过程中经常遇到的“浏览器兼容性”问题。本文将深入探讨CSS在当今流行浏览器中的兼容性，并为开发者提供一些实用的解决方案。 #### 二、CSS与浏览器...
### div+css在不同浏览器的兼容问题 #### 一、引言 随着互联网技术的发展，网页设计变得越来越重要。为了创建美观且响应迅速的网页，设计师们常常采用div+css布局方式。然而，在不同的浏览器环境下（例如Internet ...
处理这些兼容性问题需要对各个浏览器的特性有深入理解，并熟练运用各种CSS hack和技巧。在实际开发中，可以使用工具如Autoprefixer自动添加浏览器前缀，以及使用条件注释或JavaScript库如Modernizr来检测浏览器特性...
还可以使用在线工具，如Can I Use，来查看CSS特性的浏览器兼容性信息。 在编写CSS时，理解并应用以上知识点，能够有效提升代码的兼容性和可维护性。同时，持续关注CSS规范的发展和浏览器的更新，以便及时调整和优化...