前端兼容笔记--div中ul

ul列表对象也是容易在IE与Mozilla/Firefox之中发生问题的对象，主要原因源自Firefox对ul对象的默认值设置造成的。
<div id="layout">
<ul>
<li>CSS网站导航</li>
<li>高级背景控制</li>
<li>列表元素使用</li>
</ul>
</div>
css编码：
#layout {
border:1px solid #333;
}
ul {
list-style:none;
padding-left:0px;
}
当前的代码非常简单，仅仅去除了ul的列表圆点，看一下在两个浏览器中预览效果。标准状态下两个浏览器的显示都很正常，关键在于我们对ul接下来的设置，使用ul对象考虑到排版问题肯定需要设置margin元素，为了让ul放置到合适位置对css进行修改：
ul {
list-style:none;
margin-left:0px;
}
预览效果后发现，IE中的ul已经与div靠齐了，而Firefox中的ul却丝毫不动?这是为什么呢?不妨把样式表修改一下再看看：
ul {
list-style:none;
padding-left:0px;
}
这次把margin-left替换成了padding-left，再来看看预览效果。而这次的效果又刚好相反，Firefox实现了靠左，而IE下却没有任何效果。
解决方案

通过这两个代码的对比，相信大家应该能理出头绪了。在IE与Firefox中，对一部分对象有默认的属性，如h1～h6这些对象，它们本身就带有大字号、加粗样式以及一些边距效果，ul也是如此，如同不加任何属性时的预览效果一样，ul对象默认情况下是有边距的。
但是通过这两个例子我们能够知道，在IE中ul的默认边距是margin造成的，而在Firefox中，ul的默认边距是padding造成的，因此当我们单独定义margin与padding时，都不能够在两个浏览器中达到同样效果，这就是ul在不同浏览器下表现不同问题所在。
当然也可以使用hack方法，在IE下设置margin-left:0px;在Firefox下设置margin-left:20px;左右，这样实现了二者相同，这可以是一种解决方案，不是核心解决方案。建议是，在设计带有ul对象的网页时，使用标签选择符，先统一ul边距。例如在css里的顶部的位置加入以下代码：
ul {
padding:0px;
margin:0px;
}
这样页面中的所有ul对象，都没有了margin及padding值，当需要针对某一个ul进行margin或padding操作时，由于它们都已经由该代码设置为0px了，所以再进行margin或padding时，都从0开始进行计算，就不会再出现表现不同的状况了。