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

li的子元素position:relative;top:-5px;

21. ul标签默认的问题

问题：

ul标签在ff中默认是有padding的,而在ie中只有margin有

解决：

定义ul{margin:0;padding:0;}就能解决大部分问题

22. IE中li指定高度后，出现排版错误

问题：

在ie下如果为li指定高度可能会出现排版错位

解决：

设置line-height

23. ul或li浮动后，显示在div外

问题：

div中的ul或li设置float以后，都不在div中

解决：

必须在ul标签后加<divstyle="clear:both"></div>来闭合外层div

24. ul浮动后，margin变大

问题：

ul设置 float后，在ie中margin将变大

解决：

设置ul的display:inline，li的list-style-position:outside

25. li浮动后，margin变大

问题：

li设置 float后，在ie中margin将变大

解决：

设置li的display:inline

26. 嵌套使用ul、li的问题

问题：

ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距

解决：

设置里面的ul的zoom:1

27. IE6-7 li底部有3px的问题

问题：

这个bu生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。

解决：

1、div设置clear:left|both，这时li不能设置width、height、zoom。

2、li设置float:left，这时li可以设置width、height、zoom。

3、li设置clear:left|both，这时li不能设置width、height、zoom。

4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。

28. IE6 垂直列表间隙的问题

问题：

li中有a且设置display:block时，ie6中列表间会出现空隙

解决：

1、li中加display:inline;

2、li使用float 然后 clear:both;

3、给包含的文本末尾添加一个空

4、设置width

29. IE6 列表背景颜色失效的问题

问题：

当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效

解决：

ul、ol、dl 都设置为position:relative;

30. IE6-7 列表背景颜色失效的问题2

问题：

做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效

解决：

很多ie的bug都可以通过触发layout来解决 ul添加属性

1、height:1%;

2、float:left;

3、zoom:1;

31. 列表不能换行的问题

问题：

li设置为浮动，后面的li紧随其后，不能换行

解决：

1、为这个ul定义合适的宽高

2、给包含这个ul 的父div定义合适的宽高。

32. li中的内容以省略号显示

问题：

li中内容超过长度时，想以省略号显示，此方法适用于ie6-7-8、opera、safari浏览器

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