浏览器的兼容问题与解决方法

http://202.38.64.59/cgi-bin/ip?cmd=set&type=6&exp=14400&go=+?aí¨í???+

导师所带的小组信息如下：

headerKey=\ headerValue=\ list=\ value=\ required=\ />

1. 2. 3. 4. 5. 6.

7. Div的height参数值后加px如：height:10px;谷歌浏览器对height：10;有时是不识别的。

8. 不同浏览器对高度的写法： 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important;

9. 作为外部div 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

10. Div上放其他容器或控件时，其宽度和高度都不得超过div的宽和高；如：div上放图

片，该图片的width和height都在div的width和height范围内；否则如ff,谷歌浏览器会把超出的宽或高隐藏，ie6,7不会。

11. ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻

烦. (常见于导航标签和内容列表)；如ff,谷歌,ie7、8对ul(li)的识别：通用的一般最好使用list-style-type: none;。ff，谷歌浏览器有时不识别：list-style：none;

12. 各种浏览器中如div中放的是input等div不用设置width，设置一下高度，（要么就把

div的width和height固定）,设置一下input等控件的大小div就会自己分配宽度效果如：

13. Margin-top的不兼容解决办法如：

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position 属性为absolute。不要轻易在td或tr设置margin，ff,和ie6不识别较差；

14. background和background-color的兼容性：后者被ie，360，百度浏览器识别；对于ff

和谷歌识别性较差（或者说不识别）；前者：对于ie，360，ff，谷歌浏览器识别性是比较高的；

15. 关于手形光标. cursor: pointer. 而hand 只适用于 IE.上代码；

16. 垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align:

middle.( 注意内容不要换行.)因为在有部分浏览器中div中换行 就等于在为div增加高度；

17. 导航菜单上的a 标签内容加上样式时, 需要设置 display: block;（因为部分浏览器对有

些样式css不太适用）；

18. FF ，IE和谷歌中 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下

margin加倍等问题：解决方法通用代码*{margin：0 auto;padding:0; overflow: hidden.}； 13. 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;就可以了。