浏览器兼容性测试方案_常见浏览器兼容性问题_多浏览器兼容测试策略(17)

例float:left;width:100px;margin:0 100px;

解决：

设置display:inline;

11. IE6 weidth为奇数，右边多出1px的问题

问题：

父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素

解决：

将宽度的奇数改成偶数

12. IE6两个层之间3px的问题

问题：

左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距

解决：

1、右边层也采用浮动 float

2、左边层添加属性 margin-right:-3px;

13. IE6 子元素绝对定位的问题

问题：

解决：

在子元素中设置_left:-20px; _top:-1px;

14. 显示手型cursor:hand

问题：

ie6/7/8、opera都支持 但是safari 、 ff 不支持

解决：

写成 cursor:pointer; (所有浏览器都能识别)

15. IE6-7 line-height失效的问题

问题：

解决：

都设置成float

16. td自动换行的问题

问题：

Table宽度固定，td自动换行

解决：

设置Table的table-layout:fixed，td的word-wrap:break-word

17. 子容器浮动后，父容器扩展问题

问题：

子容器都float以后，父容器没有设定高度,父容器将不会扩展

解决：

只需要添加一个clear:both的div，代码如下：

<div style="border:1px solid#333;width:204px">

<divstyle="width:100px;border:1px solid #333; float:left; ">子容器a</div>

<divstyle="width:100px;border:1px solid #333; float:left;">子容器b</div>

<divstyle="clear:both"></div>

</div>

18. 透明png图片会带背景色

问题：

在ie6下透明的png图片会带一个背景色

解决：

background-image: url(icon_home.png);/* 其他浏览器 */

background-repeat: no-repeat;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');/* IE6 */

_background-image: none; /* IE6 */

19. list-style-position默认的问题

问题：

ie下list-style-position默认为inside,firefox默认为outside

解决：

css中指定为outside即可解决兼容性问题

20. list-style-image准确定位的问题

问题：

li前设置图片时，图片与其后的文字对齐问题

解决：

1、采用背景定位 和 字符缩进的方法

background:url() no-repeat left center;text-index:16px;

2、采用相对定位方法

li 设置list-style:url();

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-39333-17.html