当我们使用无序列表ul时,常常出现在不同浏览器中显示效果不一样的现象。究其原因是各浏览器对ul的margin和padding等默认值解释不同。我们对四大浏览器进行测试,将结果列表如下:
浏览器 版本
IE:6
NS:7.1
FireFox:1.0
Opera:7.6
列表标记是否在ul内
|
IE |
NS |
FireFox |
Opera |
列表标记是否在ul内 |
否 |
是 |
是 |
否 |
各浏览器中ul的margin默认值
|
IE |
NS |
FireFox |
Opera |
margin-top |
0 |
0 |
0 |
>0 |
margin-right |
0 |
0 |
0 |
0 |
margin-bottom |
>0 |
0 |
0 |
0 |
margin-left |
>0 |
0 |
0 |
>0 |
各浏览器中ul的padding默认值
|
IE |
NS |
FireFox |
Opera |
padding-top |
0 |
0 |
0 |
0 |
padding-right |
0 |
0 |
0 |
0 |
padding-bottom |
0 |
0 |
0 |
0 |
padding-left |
0 |
>0 |
>0 |
0 |
由此可见,各浏览器对ul的默认值解释差异非常大,所以在使用ul时,必须使用样式表格式化它,使各浏览器使用相同margin和padding值。
下面是我常用的样式表,效果不错。
ul
{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 20px;
}