浅谈ul标签在Firefox与IE下的不同
ul标签是我们经常使用的的标签,但由于我习惯使用IE后，并没有去在乎其在其他浏览器中运行的效果，在别人推荐使用Firefox后才发现ul在IE和Firefox下是不兼容的，ul在Firefox下有个padding值,而在IE下是没有的,反之在IE下有个margin值，而在Firefox下却是没有的，通过下面这个例子来证实一下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body{
font-size:12px;
margin:20px;
line-height:18px;
}
#box{
width:200px;
background:gray;
border:white 1px solid;
}
#box ul{
padding:0;
margin:0;
list-style:none;
}
</style>
</HEAD>
<BODY>
<div id="box">
<ul>
<li>这是第一句话</li>
<li>这是第二句话</li>
<li>这是第三句话</li>
<li>这是第四句话</li>
<li>这是第五句话</li>
</ul>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
body{
font-size:12px;
margin:20px;
line-height:18px;
}
#box{
width:200px;
background:gray;
border:white 1px solid;
}
#box ul{
padding:0;
margin:0;
list-style:none;
}
</style>
</HEAD>
<BODY>
<div id="box">
<ul>
<li>这是第一句话</li>
<li>这是第二句话</li>
<li>这是第三句话</li>
<li>这是第四句话</li>
<li>这是第五句话</li>
</ul>
</div>
</BODY>
</HTML>
以上代码在Firefox、IE下运行通过,要想看出他们的不同点,可以把样式#box ul{padding:0;margin:0;list-style:none;}中的padding和margin分别调出来测试，这里没有把代码贴出来，自己可以修改代码来理解他们的不同。还有一点注意,在Firefox下ul的list-style默认是处于外边缘的,可以通过CSS来更改此样式(list-style:inside)以达到跟IE兼容。(这都是我个人的理解,有不正之处请大家指正)。
