ie6,ie7,ie8的兼容.doc

ie6,ie7,ie8的兼容 用div+css布局的网页在IE6、IE7、FF下严重错位2009-04-23 13:54博客界面错位，这个不是每天都能看到的。呵呵，可是在我开博的一天后， 在wordpress中文上， 我放上了我自己的博客，很快，就被人发现了问题，我的博客界面错位， div+css的排版不兼容几大主流浏览器，正想标题所描述的一样！ 下面是为了解决这个问题，而在网络上找到了这篇文章，我经阅读理解后， 记录在此，也希望能帮到其他的与我遇到同样问题的人！ 下面是CSS兼容IE6,IE7和FF的注意事项 CSS hack：针对IE6，IE7，firefox显示不同效果，做网站时经常会用到。 下面是区别不同浏览器的CSS hack写法： 那用什么方法来区别他们呢？对了，你可以用 * ，!important ，_ ，这 个三样东西来把他们区分开来。 【注:IE都能识别 * ，标准浏览器(如FF)不能识别 * 。】 IE6能识别 * ，但不能识别 !important; IE7即能识别*，也能识别!important; FF却不能识别*，但能识别!important; 如下，你只要对照上面的提到的 “注意” 看便是了 ： 区别IE6与FF： background:#F00;*background:#00F; 区别IE6与IE7： background:#0F0 !important;background:#00F; 区别IE7与FF： background:#F00; *background:#0F0; 区别FF，IE7，IE6： background:#F00;*background:0F0 !important;*background:#00F; 另外再补充一个，下划线”_”, IE6支持下划线，IE7和firefox均不支持下划线。 浏览器/符号 IE6 IE7 FF(FireFox) *(星号) √ √ × !important × √ √ _(下划线) √ × × 于是大家还可以这样来区分，IE6，IE7，firefox : background:orange; *background:green;_background:blue; 【注：:不管是什么方法，书写的顺序都是firefox的 写在前面，IE7的写在中间，IE6的写在最后面。】 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1、!important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. 【注：注意写法.记得该声明位置需要提前.】 2、IE6/IE7对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 注意: *+html 对IE7的HACK 必须保证HTML 顶部有如下声明： /TR/html4/loose.dtd 二、其他的一些技巧 技巧一： 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. 技巧二： 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针 对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有 问题了。 现在写一个CSS可以这样： #1 { color: #333; } /* Moz */