CSS浏览器兼容性与解析问题终极归纳

CSS浏览器兼容性与解析问题终极归纳1.怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。2.IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。例如：HTML：divclass=myDiv/divCSS：.myDiv{width:100px;height:100px;border:1pxsolid#000;float:left;margin-left:30px;}Firefox预览结果：IE6预览结果：很明显的，在IE6中，margin-left:30px的边距翻倍成60px了。解决问题：设置display:inline：.myDiv{width:100px;height:100px;border:1pxsolid#000;float:left;display:inline;margin-left:30px;}IE6预览结果：3.上下margin重合：margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合。不管IE还是Firefox都存在这问题。例如：HTML：divclass=topDiv/divdivclass=bottomDiv/divCSS：.topDiv{width:100px;height:100px;border:1pxsolid#000;margin-bottom:25px;}.bottomDiv{width:100px;height:100px;border:1pxsolid#000;margin-top:50px;}我们对上面的div设置了25px的下边距，对下方的div设置了50px的上边距。为了便于观察，这里将div的高度都设为100px。浏览器预览结果：可见，结果不是预期的上下div拉开75px的距离，而是拉开了半个div高度(50px)的距离。解决问题：统一使用margin-top或者margin-bottom，不要混合使用。这并不是技术上的必需，但却是个良好的习惯。4.超链接访问后hover样式不出现：有时候我们同时设置了a:visited和a:hover样式，但一旦超链接访问后，hover的样式就不再出现，这是怎么回事呢？是因为将样式顺序放错了，调整为先a:visited再a:hover。关于a标签的四种状态的排序问题，有个简单好记的原则，叫做lovehate原则，即i(link)ov(visited)eh(hover)a(active)e。5.IE6、IE7的hasLayout问题：很多时候，CSS在IE下的解析十分奇怪，明明在Firefox中显示得非常正确，但到了IE下却出现了问题，有的时候，这些问题甚至表现得非常诡异。例如一个比较经典的Bug就是设置border的时候，有时候border会断开，刷新页面或者拖下滚动条的时候，断掉的部分又会连接起来。再比如在IE6&IE7中对元素设置浮动后，其后的元素并未占据这部分空间，造成了IE6&IE7中浮动元素未脱离文档流的假象。也就是说，实际上IE6&IE7浮动元素也脱离了文档流，只是由于其后元素的hasLayout被自动触发而导致的。这里说的hasLayout被触发，即指元素的hasLayout属性为true。下列元素默认hasLayout=true：html,bodytable,tr,th,tdimghrinput,button,select,textarea,fieldset,legendiframe,embed,object,appletmarquee下列CSS属性和取值将会自动让一个元素的hasLayout=true：position:absolute绝对定位元素的包含区块(containingblock)就会经常在这一方面出问题。float:left|right由于layout元素的特性，浮动模型会有很多怪异的表现。display:inline-block当一个内联级别的元素需要layout的时候往往就要用到它，这也可能也是这个CSS属性的唯一效果–让某个元素拥有layout。inline-block行为在IE中是可以实现的，但是需要注意的是：IE/Win:inline-blockandhasLayout。width:除“auto外的任意值很多人遇到layout相关问题发生时，一般都会先尝试用这个来修复。height:除“auto外的任意值height:1%就在HollyHack中用到。zoom:除“normal外的任意值IE专有属性。不过zoom:1可以临时用做调试。writing-mode:tb-rlMS专有属性。overflow:hidden|scroll|auto在IE7中，overflow也变成了一个layout触发器，这个属性在之前版本IE中没有触发layout的功能。overflow-x|-y:hidden|scroll|autooverflow-x和overflow-y是CSS3盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发layout的功能。另外IE7的荧幕上又新添了几个haslayout的演员，如果只从hasLayout这个方面考虑，min/max和width/height的表现类似，position的fixed和absolute也是一模一样。position:fixedmin-width:任意值就算设为0也可以让该元素获得layout。max-width:除“none之外的任意值min-height:任意值。即使设为0也可以让该元素的haslayout=truemax-height:除“none之外的任意值如果BUG是由于hasLayout未触发所引起的，则可采用手动触发hasLayout来解决：办法是使用一个生僻的CSS属性zoom来触发，引用样式.zoom{zoom:1}。如果BUG是hasLayout被自动触发而引起的，则要看触发是什么引起的，若这元素本身就会自动触发hasLayout，可以考虑换一个元素。若是对于这元素设置的某个CSS属性引起的，则可以考虑删除这属性，倘若这属性又是必要的，则就需要自己根据具体情况去编写CSSHack，因为hasLayout是只读的，一旦hasLayout=true后，便不可逆转。6.行内元素上下margin及padding不拉开元素间距的问题：行内元素的margin和padding属性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。例如：HTML：div块级元素/divspan行内元素/spanCSS:div{background:gray;padding:20px;}span{background:green;padding:20px;margin:20px;}各浏览器预览结果：可见竖直方向的padding、margin虽然增大了行内元素的面积，但并没有和相邻元素拉开距离，导致了元素重叠。解决问题：将行内元素display设置为block即可解决修改后CSS：span{background:green;padding:20px;margin:20px;display:block;}各浏览器预览结果：但由于块级元素与行内元素的默认样式不同，可能会因此书写额外的样式代码。比如width样式，因为块级元素默认占据整行。7.IE6下select元素显示问题：浏览器解析页面时，会先判断元素的类型，如果是窗口类型的，会优先于非窗口类型的元素，显示在页面最顶端，如果同属于非窗口类型的，才会去判断z-index的大小。select元素在IE6下是以窗口形式显示的，这是IE6的一个Bug。导致的情况是往往想要弹出一个层，结果select元素出现在层上方。例如：HTML：selectoption=请选择=/option/selectdiv/divCSS：div{position:absolute;background:#CCDCEE;top:0px;left:0px;width:300px;height:300px;border:1pxsolid#000;margin:5px;}IE6预览结果：解决问题：我们可以用一个和弹出层同样大小的iframe放在层下面，select上面，用iframe遮住select。比如设置弹出层的样式z-index:2，iframe的样式z-index:1，使iframe位于层下方。修改后HTML：selectoption=请选择=/option/selectdiv/diviframesrc=xx.htm/iframe修改后CSS：div{position:absolute;background:#CCDCEE;top:0px;left:0px;width:300px;height:300px;border:1pxsolid#000;margin:5px;z-index:2;}iframe{position:absolute;top:0px;left:0px;width:300px;height:300px;margin:5px;z-index:1;}我们让iframe位于div下方，大小以及与浏览器的距离调整成与div一致。IE6预览结果：8.IE6对png的透明度支持问题：png格式因为其优秀的压缩算法和对透明度的完美支持，成为Web中最流行的图片格式之一。但它存在一个众所周知的头疼问题---IE6下对png的透明度支持并不好。本该是透明的地方，在IE6下会显示为浅蓝色。可以使用IE下私有的滤镜功能来解决问题，格式如下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png图片路径',sizingMethod='crop')。9.ul的不同表现：ul列表也是在IE与Firefox中容易发生问题的对象，主要源自浏览器对ul对象的默认值设置。在IE与Firefox中，一部分对象有默认的属性（比如h1~h6），他们本身就带有大字号、加粗样式以及一些边距效果。ul也是如此，默认情况下ul是有边距的。例如：HTML：divid=layoutulli菜单一/lili菜单二/lili菜单三/li/ul/divCSS：#layout{border:1pxsolid#333;}ul{list-style:none;}代码非常简单，仅去除了ul的列表圆点。看下在IE和Firefox的预览效果：IE预览结果：Firefox预览结果：显示都很正常，关键在于我们对ul接下来的设置：修改后的CSS：#layout{border:1pxsolid#333;}ul{list-style:none;margin-left:0px;}设置ul左外边距为0后。IE预览结果：Firefox预览结果：预览后发现问题出现了。IE中的ul已与div靠齐，而Firefox中的ul却丝毫不动。这是为什么？不妨把样式修改下再看看。修改后的CSS：#layout{border:1pxsolid#333;}ul{list-style:none;padding-left:0px;}这次我们把margin-left换成pa