1、CSS 浏览器兼容性与解析问题终极归纳 1.怪异模式问题：漏写 DTD声明，Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好习惯。2.IE6 双边距问题：在 IE6 下，如果对元素设置了浮动，同时又设置了 margin-left 或margin-right，margin 值会加倍。例如：HTML：CSS：.myDivwidth:100px;height:100px;border:1px solid #000;float:left;margin-left:30px;Firefox 预览结果：IE6 预
2、览结果：很明显的，在 IE6 中，margin-left:30px 的边距翻倍成60px 了。解决问题：设置 display:inline：.myDivwidth:100px;height:100px;border:1px solid #000;float:left;display:inline;margin-left:30px;IE6 预览结果：3.上下 margin 重合：margin 是个有点特殊的样式，相邻的 margin-left 和margin-right是不会重合的，但相邻的 margin-top 和 margin-bottom 会产生重合。不管 IE 还是Firefox 都存在
3、这问题。例如：HTML：CSS：.topDivwidth:100px;height:100px;border:1px solid #000;margin-bottom:25px;.bottomDivwidth:100px;height:100px;border:1px solid #000;margin-top:50px;我们对上面的 div 设置了 25px 的下边距，对下方的 div 设置了50px 的上边距。为了便于观察，这里将 div 的高度都设为 100px。浏览器预览结果：可见，结果不是预期的上下 div 拉开 75px 的距离，而是拉开了半个 div高度(50px)的距离。解决问
4、题：统一使用 margin-top 或者margin-bottom，不要混合使用。这并不是技术上的必需，但却是个良好的习惯。4.超链接访问后 hover 样式不出现：有时 候我们同时设置了 a:visited 和 a:hover样式，但一旦超链接访问后，hover的样式就不再出现，这是怎么回事呢？是因为将样式顺序放错了， 调整为先 a:visited 再 a:hover。关于 a 标签的四种状态的排序问题，有个简单好记的原则，叫做 love hate 原则，即 i(link)ov(visited)e h(hover)a(active)e。5.IE6、IE7 的 hasLayout 问题：很多时
5、候，CSS 在 IE 下的解析十分奇怪，明明在 Firefox中显示得非常正确，但到了 IE下却出现了问题，有的时候，这些问题甚至表现得非常诡异。例如一个比较经典的 Bug 就是设置 border 的时候，有时候 border 会断开，刷新页面或者拖下滚动条的时候，断掉的部分又会连接起来。再比如在 IE6padding:20px;spanbackground:green;padding:20px;margin:20px;各浏览器预览结果：可见竖直方向的 padding、margin 虽然增大了行内元素的面积，但并没有和相邻元素拉开距离，导致了元素重叠。解决问题：将行内元素display 设置为
6、block即可解决修改后 CSS：spanbackground:green;padding:20px;margin:20px;display:block;各浏览器预览结果：但由于块级元素与行内元素的默认样式不同，可能会因此书写额外的样式代码。比如width 样式，因为块级元素默认占据整行。7.IE6 下 select元素显示问题：浏览 器解析页面时，会先判断元素的类型，如果是窗口类型的，会优先于非窗口类型的元素，显示在页面最顶端，如果同属于非窗口类型的，才会去判断z-index 的大小。select 元素在 IE6 下是以窗口形式显示的，这是 IE6的一个Bug。导致的情况是往往想要弹出一个层
7、，结果 select 元素出现在层上方。 例如：HTML：=请选择=CSS：divposition:absolute;background:#CCDCEE;top:0px;left:0px;width:300px;height:300px;border:1px solid #000;margin:5px;IE6 预览结果：解决问题： 我们可以用一个和弹出层同样大小的 iframe 放在层下面，select 上面，用 iframe 遮住select。比如设置弹出层的样式z-index:2，iframe 的样式 z-index:1，使 iframe 位于层下方。修改后 HTML：=请选择=修改后
8、CSS：divposition:absolute;background:#CCDCEE;top:0px;left:0px;width:300px;height:300px;border:1px solid #000;margin:5px;z-index:2;iframeposition:absolute;top:0px;left:0px;width:300px;height:300px;margin:5px;z-index:1;我们让 iframe 位于 div 下方，大小以及与浏览器的距离调整成与div 一致。IE6 预览结果：8.IE6 对 png 的透明度支持问题：png 格式因为其优秀
9、的压缩算法和对透明度的完美支持，成为 Web中最流行的图片格式之一。但它存在一个众所周知的头疼问题-IE6 下对png 的透明度支持 并不好。本该是透明的地方，在 IE6 下会显示为浅蓝色。可以使用 IE 下私有的滤镜功能来解决问题，格式如 下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=png 图片路径 ,sizingMethod=crop)。9.ul 的不同表现：ul 列表也是在 IE 与Firefox 中容易发生问题的对象，主要源自浏览器对 ul对象的默认值设置。在 IE 与 Firefox 中，一部分对象有
10、默认的属性（比如 h1h6），他们本身就带有大字号、加粗样式以及一些边距效果。ul 也是如此，默认情况下ul 是有边距的。例如：HTML：菜单一菜单二菜单三CSS：#layoutborder:1px solid #333;ullist-style:none;代码非常简单，仅去除了 ul 的列表圆点。看下在 IE和 Firefox 的预览效果：IE 预览结果：Firefox 预览结果：显示都很正常，关键在于我们对 ul 接下来的设置：修改后的 CSS：#layoutborder:1px solid #333;ullist-style:none;margin-left:0px;设置 ul 左外边距
11、为 0后。IE 预览结果：Firefox 预览结果：预览后发现问题出现了。IE 中的 ul 已与 div 靠齐，而 Firefox 中的ul 却丝毫不动。这是为什么？不妨把样式修改下再看看。修改后的 CSS：#layoutborder:1px solid #333;ullist-style:none;padding-left:0px;这次我们把margin-left 换成 padding-left。再来看看预览结果。IE 预览结果：Firefox 预览结果：可见效果正好相反，Firefox 中实现了靠齐，而 IE 中丝毫未动。通过以上例子我们发现：在 IE 中，ul 的默认边距是 margin
12、，在 Firefox 中，ul 的默认边距是 padding。我们单独定义 margin 或 padding时，自然不能在两个浏览器达到一致效果。这就是 ul在不同浏览器下表现不同的问题所在。解决问题：可以用 hack 方法分别针对 IE和 Firefox 单独写样式，但更好的做法是样式开头先统一 ul边距，ulpadding:0px;margin:0px;。10.IE3px问题：3px 问题不是经常被人发现，因为它的影响只产生 3px 的位移。如果是精确到像素级的设计，3px 的影响可谓不小。先来看下例子：HTML：左浮动 div段落CSS： #leftfloat:left;border:1
13、px solid #333;width:100px;height:100px;#mydivborder:1px solid #f66;margin-left:130px;#left 是引发 Bug的一个浮动div，同时设置了边框便于观察。IE 预览结果：Firefox 预览结果：从理论上讲，我们还没有设置#mydiv的 padding，它们理所当然是紧贴边框的。但在 IE 中，“段落”文字并未紧紧贴住#left。在实际中可能会因此导致内部元素宽度超出外部 div 固定宽度而引发布局问题。解决问题：是把#mydiv设置为 display:inline-block。修改后 CSS：#leftflo
14、at:left;border:1px solid #333;width:100px;height:100px;#mydivborder:1px solid #f66;margin-left:130px;+display:inline-block;用 hack方法为 IE单独设置 display:inline-block后。IE 各版本预览结果：结果与 Firefox一致。11.高度不适应问题：高度不适应指的是，当内层对象的高度发生变化时，外层对象的高度不能自动扩展，特别是当内层对象使用padding 或 margin 之后。高度不适应问题不是 IE的专利，Firefox 也出现这种问题。先来看
15、看例子：HTML：p 对象中的内容CSS：#boxbackground-color:#eee;#box pmargin-top:20px;margin-bottom:20px;text-align:center;看看代码做了什么，除了背景之外，#box 仅是一个没有任何样式的 div，而 p 加 了 2 个关键属性 margin-top:20px，margin-bottom:20px;，即上下外边距都是 20px，p 对象的高度应当是 20+20+文 字高度，即应当在 40px 以上。理论上#box 这个div 的高度会被挤开，至少达到 40px 以上。我们看看预览效果。浏览器预览结果：似乎并
16、非预想的结果，看上去带背景的#box 还是和文字一样高，并没有超过40px，这是为什么呢？为了验证一些事情，我们在 html 前后加上一个带背景的 div。修改后的 HTML：upp 对象中的内容down修改后的 CSS：#boxbackground-color:#eee;#box pmargin-top:20px;margin-bottom:20px;text-align:center;.box2background-color:#aaa;再来看下预览结果：浏览器预览结果：可以看到上下两个 div 并没有紧贴#box 对象，而是有一定的间距。测量下会发 现，这个间距刚好是 p 对象的 mar
17、gin 上下各20px。这个测验证明了一个问题，就是#box 对象并没有因其中的 p 对象的 margin 变化而改变自身的 高度。而 p 对象的margin 高度的确在整个页面中占据了一定的空间。相当于#box 不动，而 p 把自己撑到了#box 外面去了。无论是 IE还是 Firefox，测试中都会发现这个问题。解决问题：经过一些测试，我们发现对#box 定义padding 或者 border，就会迫 使#box 重新计算自己的高度，从而使自身能够适应内容的高度变化。但如果强制给对象设置了边距又会带来位移。我们需要找到一个新方法，不再从对象本身的 属性入手，而是在对象的内部进行修复。我们可
18、以在对象上下增加 2 个高度为 0 的空 div，并强制内容不显示。修改后的 HTML：upp 对象中的内容down这 2 个 div 只充当了占位符的角色，而不发生实际的占位。而对它的外层对象而言，由于其中多了一些逻辑占位对象使得它会重新计算高度，从而实现高度的自适应。预览效果：12.IE6 断头台问题：断头台问题是国外的 CSS 设计者给这个问题起的一个非常形象的名字，与之相反的，被切断的不是对象的头部，而是对象的底部。先来看下例子：HTML：W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款
19、和隐私条款。版权所有，保留一切权利。未经书面许可，不得转载。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任链接 1链接 2链接 3链接 4XHTML代码有三部分组成，一个是主对象#layout，主框架中有#left 为左浮动对象，右侧为普通的 4 个链接，类似于左右分栏的布局。CSS：#layoutborder:5px solid #35BB0C;width:400px;background-color:#F2F2F2;#leftborder:5px solid #D4CA25;width:200px;float:left;background-color:
20、#fff;a:hoverbackground-color:#fff;在 CSS 代码部分，主要设置了链接的背景色，#left 的左浮动，以便于我们观察的粗边框效果。先通过浏览器看看问题是如何发生的，见下图：IE6 预览效果：这里列出了IE6 网页效果的 2 个状态，当网页被打开时，页面正常显示，与 CSS 编 码指定样式一致。当鼠标右侧的“链接 4”时，问题出现了，主对象#layout 下面被切掉了，而剩下的高度正好是 4个链接的高度。而当鼠标移到“链接 1” 或“链接 2”时，#layout 对象的高度又恢复正常。这便是 IE6 断头台问题。这个问题的主要原因在于链接上，去除链接的 a:ho
21、verbackground-color:#fff样式后，一切正常。经测试发现，不仅仅是 background-color的变化，如果改 变 hover 状态下链接的其他属性，也会引发同样的问题。例如设置 padding、border、加粗、斜体等，都会引发断头台问题。值得注意的是，在#layout 中，#left 是个浮动对象，而右测是若干链接对 象。对于未指定高度的对象而言，IE6 会根据其中的内容（不管浮动与否）来计算高度的大小，而当例子中的链接对象是个非浮动对象，并具有 hover 改变 border,background及 padding 属性时，IE6 会认为这些属性同时会改变#la
22、yout 的高度，因此它重新计算对象高度。而令人失望 的是，IE6 的这种自以为是的行为并没有达到预期目的，它会把非浮动对象的总高度作为高度给了#layout，从而切断了#left 的内容。基于这类问题 的产生原因，解决方案可以有多种。解决问题：根据问题产生的原因，我们可以做出多套解决方案。我们知道因为非浮动对象与浮动对象都在#layout 中，所以我们可以从浮动方式入手，把非浮动对象改为浮动对象，这样便可以解决问题。例如对 XHTML 修改如下：W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款
23、和隐私条款。版权所有，保留一切权利。未经书面许可，不得转载。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任链接 1链接 2链接 3链接 4对链接加上个 div，并设置浮动#rightfloat:left。这样使得两个对象都成为浮动对象，不会引发问题。也可以在#layout 底部增加一个 div来强制 IE浏览器重新计算高度，这个清除浮动内容的 div 会帮助浏览器重新找到合适的高度，从而解决断头台问题。13.容器不扩展问题：容器不扩展问题是我们经常遇到的。比如我们创建了一个 div 嵌套结构:HTML：子容器 a子容器 bCSS：#divGroupborde
24、r:2px solid #333;#a,#bborder:2px solid #333;float:left;margin:5px;IE 预览结果：Firefox 预览结果：可见外层的高度并没有随着子容器的高度自动扩展，却是形成了一条线。这是因为当子容器成为浮动元素后，并脱离了文档流。因此父容器认为自己内容为空，从而造成了这样的结果。解决问题：解决方案是在容器的末尾加入个清理浮动的 div。修改后的 HTML：子容器 a子容器 b如果还想防止这个元素占据父元素的高度，可以进一步优化成，这样这个清除浮动的容器被认为是个不占任何高度的空格字符。在网页中的 任何地方，当遇到容器不扩展时，只需加入此段
25、便能修复问题。14.IE8 和 FireFox 父子元素上下 margin 叠加问题：先看下效果：.graybackground:gray;width:200px;margin:20px;.bluebackground:blue;width:100px;height:100px;margin:20px;.blackbackground:black;width:100px;height:100px;margin:20px;上图中，蓝色 div和黑色 div 是灰色 div 的子元素，三个 div的 margin 都是 20，但是我们看到蓝色 div 与其父元素的上边界并没有 20px 的间隙，黑
26、色 div与其父元素的下边界也没有 20px 的间隙，也就是说蓝色 div 的上 外边距与其父元素的上外边距叠加在了一起，就好像是蓝色 div 的上外边距跑出去了一样。黑色 div也是同理。这就是父元素与子元素的边距叠加效果，叠加后 的取值取的是两者中较大的那个。经测试，只要父元素有 border或 padding，就不会触发这个问题。然而刻意给父元素设置border 或 padding 又会带来位移。可采用如下方法来根本解决问题：解决问题：给父元素设置 overflow:hidden;即可解决。再来预览下：IE8：解决了。FireFox：也解决了。15.IE6 高度不固定问题：典型 BUG1
27、：IE6 下，即使给父元素设了固定高度，子元素还是会将其撑开。典型 BUG2：如果一个元素没有子元素，而这个元素设置的 length 又小于 div默认高度，则这个元素在 IE6 里显示的高度仍然是 div 的默认高度。引发以上 2个 BUG 的原因在于 length属性在 IE6 里被当作min-length（最小高度）解析了，（换句话说，你压根在 IE6 中就没设置过固定高度，因为你设置的是最小高度）解决办法是再给父元素设置 overflow:hidden; 16.IE6 设置了最小高度并撑满父元素高度：默认情况下如果对 IE6 设置了最小高度 200px，那么如果实际内容有 250px，
28、则只会显示250px的高度。也就是高度会跟随着内容显示。如果此时希望无论里面内容有多少，都让其填充满父元素高度，则要这么设置：height:auto!important; height:200px; min-height:200px;17.IE6、IE7 下浮动元素未脱离文档流假象的问题：对元素设置浮动后，在 IE6width:100%;height:100%;top:0px;left:0px;background-color:#7E9898;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;下面是
29、对话层：也是绝对定位：.confirmposition:absolute;width:400px; height:300px; background:#FFFFFF;top:300px;left:0px;这里的提示层不要嵌套在遮罩层里面，否则也会受影响，变成半透明的了。要让提示层跟遮罩层并列。这里还有 2个问题：1.单单对遮罩层使用 height:100%，只有 IE6会达到效果，而其他浏览器一旦只会是当前可见区域遮上了，如果拖动纵向滚动条，发现下方还有没遮盖上。2.用户电脑分辨率不同，而绝对定位的提示层使用 margin:300px auto 也无效。为了达到各浏览器网页可见区域全部遮盖的效
30、果，这里用了下jquery 脚本，解决以上 2个问题： $(document).ready(function()$(“divclass=cover“).height($(document).height();/将可见区域都遮罩起来$(“divclass=confirm“).css(“left“,($(document).width()-($(“divclass=confirm“).width()/2+“px“);/提示层居中);最佳实践：1.写 DTD 声明：2.引入 base.css 重置各浏览器默认属性值：html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h
31、4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tdmargin:0px;padding:0px;tableborder-collapse:collapse;border-spacing:0px;fieldset,img,abbr,acronymborder:0px;address,caption,cite,code,dfn,em,strong,th,varfont-style:normal;font-weight:normal;ol,ullist-style:none;caption,thtext-align:left;h1,
32、h2,h3,h4,h5,h6font-size:100%;font-weight:normal;q:before,q:aftercontent:;3.同时为一个元素写 float 和 margin-left（margin-right）的时候，习惯性地想到 IE6会双倍边距，用 display:inline 解决。4.为子元素写margin-top 或 margin-bottom 的时候，习惯性的去思考父元素是否有padding或 border 属性，从而断定是否会在 IE6解决。5.给元素设了固定高度后，习惯性地再设个 overflow:hidden;从而避免 IE6 上高度继续扩展的问题。6.必要时候要clear，。7.对于文本，在使用 margin-left、padding-left、margin-top、padding-top 之前优先考虑是否可用 text-indent 和 line-height 代替。因为计算尺寸的代价相对来说要大些。如能做到以上几点，就已经避免了 90%的浏览器兼容性问题。
