常见浏览器兼容问题常见浏览器兼容问题.txtCSS兼容IE6,IE7和FF的总结(3-11) CSS hack：针对IE6，IE7，firefox显示不同效果 做网站时经常会用到，衡量一个DIV+CSS架构师的水平时，这个也很重要。 区别不同浏览器的CSS hack写法： 区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *background:green; 区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue; 注：IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important;IE6 IE7 FF * !important - 另外再补充一个，下划线_, IE6支持下划线，IE7和firefox均不支持下划线。 IE6 IE7 FF * !important _ 于是大家还可以这样来区分IE6，IE7，firefox : background:orange;*background:green;_background:blue; 注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) stylegt; #wrapper width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ /stylegt; 2, IE6/IE7对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. #wrapper #wrapper width: 120px; /* FireFox */ *html #wrapper width: 80px; /* ie6 fixed */ *+html #wrapper width: 60px; /* ie7 fixed, 注意顺序 */ 注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明： 二、万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 How To Clear Floats Without Structural Markup 将以下代码加入Global CSS 中,给需要闭合的div加上 /* Clear Fix */ .clearfix:after content:.; display:block; height:0; clear:both; visibility:hidden; .clearfix display:inline-block; /* Hide from IE Mac */ .clearfix display:block； /* End hide from IE Mac */ /* end of clearfix */ 关于闭合浮动元素（clearing float）的方法现在已经很多了，个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看上去不够简洁。 现在看到有个方法超级简单。介绍一下这个方法。原文在：http:/annevankesteren.nl/2005/03/clearing-floats 这 一方面的原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ID的问题了，再加上“_height:1%”，这 个问题就完全解决了。 下面的例子作为比较 1、没有闭合浮动元素；2、非IE下闭合浮动元素；3、完全闭合元素。相关代码如下： XHTML代码： Example Source Code ww w.52css.com Float left Float right CSS样式： Example Source Code ww w.52css.com #wrap border:6px #ccc solid; overflow:auto; _height:1%; .column_left float:left; width:20%; padding:10px; .column_right float:right; width:75%; padding:10px; border-left:6px #eee solid; 三、其他兼容技巧(再次啰嗦) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签) 4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. 5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针 对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 现在写一个CSS可以这样： #1 color: #333; /* Moz */ * html #1 color: #666; /* IE6 */ *+html #1 color: #999; /* IE7 */ 那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 2 css布局中的居中问题 主要的样式定义如下： body TEXT-ALIGN: center; #center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 说明： 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div， 只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 3 盒模型不同解释. #box width:600px; /for ie6.0- width:500px; /for ff+ie6.0 #box width:600px!important /for ff width:600px; /for ff+ie6.0 width /*/:500px; /for ie6.0- 4 浮动ie产生的双倍距离 #box float:left; width:100px; margin:0 0 0 100px; /这种情况之下IE会产生200px的距离 display:inline; /使浮动忽略 这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,.不可控制(内嵌元素); #box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效果 diplay:table; 5 IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度， 正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px; 6 页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个， 而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定