《css兼容ie67ff.doc》由会员分享，可在线阅读，更多相关《css兼容ie67ff.doc（6页珍藏版）》请在金锄头文库上搜索。
1、关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.一、 CSS HACKHACK概念：不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,H
2、ACK规则：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;IE6IE7FF*!important浏览器优先级别:FFIE7IE6,CSS hack书写顺序一般为FF IE7 IE6例：以: #demo width:100px; 为例;#demo width:100px; * html #demo width:120px; *+html #demo width:130px; - 所以最后,#demo的宽度在三个浏览器的解释为:FIREFOX:100px;
3、ie6:120px;ie7:130px;以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)#wrapperwidth: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */2, IE6/IE77对FireFox*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.#wrapper#wrapper width: 120px; /* Fir
4、eFox */*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加上 class=clearfix 即可,屡试不爽./* Clear Fix */.clearfix:afte
5、rcontent:.;display:block;height:0;clear:both;visibility:hidden;.clearfixdisplay:inline-block;/* Hide from IE Mac */.clearfix display:block;/* End hide from IE Mac */* end of clearfix */三、其他兼容技巧1.ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。所以先定义ulmargin:0;padding:0;就能解决大部分问题。也可用!important解决2. 居中问题.1).
6、垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)你可以把html的body之内任何项目置于中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下：body text-align: center;#content text-align: left;width: 700px;margin: 0 auto;对body的设定将导致主体内容居中，但是连所有的文字也
7、居中了，这恐怕不是你想要的效果，为此#content 的div还要指定一个值：text-align: left3. IE5 和IE6的BOX解释不一致IE5下divwidth:300px;margin:0 10px 0 10px;div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改divwidth:300px!important;width :340px;margin:0 10px 0 10px关于这个是什么我也不太明
8、白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）4. FORM标签与ul 标签的事先声明这2个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,formmargin:0;padding:0;给定义死了,所以后面就不会为这个头疼了.5.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以6.如果文字过长，则将过长的部分变成省略号显示：IE5，F
9、F无效，但可以隐藏，IE6有效 就是比如有一行文字，很长，表格内一行显示不下。P固定宽度汉字截断：overflow：hidden；text-overflow：ellipsis；white-space：nowrap；（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。7.IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解
10、决这个问题，可以这样：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;8. 浮动ie产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; /这种情况之下IE会产生200px的距离 display:inline; /使浮动忽略这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特
11、点是,和其他元素在同一行上,不可控制(内嵌元素);#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的效果 diplay:table;10. 为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:height:auto!important;height:200px;min-height:200px;11. 清除浮动.h
12、ackbox display:table; /将对象作为块元素级的表格显示或者.hackbox clear:both;11. 清除浮动.hackbox display:table; /将对象作为块元素级的表格显示或者.hackbox clear:both;或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所 以并不影响到IE/WIN浏览器。这种的最麻烦的.#box:after content: .; display: block; height: 0; clear: both; visibility: hidden;8
13、 DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box float:left; width:800px;#left float:left; width:50%;#right width:50%;*html #left margin-right:-3px; /这句是关键HTML代码 9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)piddivid这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如pid
14、中,所有p标签中有id的都是同样式的.10 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。11 高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例： p对象中的内容 CSS：#box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-al
