浏览器兼容经验1：如何解决firefox和IE中把ul和li左边的空白不同表现

问题提出：在IE中，ul的默认边距是margin，而在FF中，ul的默认边距是padding，当我们单独定义margin或padding时，往往不能再两个浏览器中达到相同的效果。经过几次折腾，结合网上找的材料，将ul标签左边空白不一致问题的解决方法总结如下：

方法1：hack方法

   在IE中使用margin-left：0px；在FF中使用margin-left:-20px。

方法2：设置初始值（最佳方案）

使用标签选择符设置统一的初始值。

一般来说，先定义

UL{

     margin:0;

     border:0;

     padding:0;

}
能解决大部分IE/firefox的列表错位问题

另外：
IE6 Li标签左边多出16像素(px)宽度的BUG

偶然发现，IE６的Li标签左边会多出16px的宽度，即使把list-style-type设置成none。而在Firefox中却是正常的（IE其它版本没测试，不过应该是和Firefox一样的）。

经验证，其实是IE６的list-style-position属性造成的，默认情况下，Firefox中list-style-position值为outside,即列表项符号会在LI标签的外面显示。而IE６的默认值则相反(inside)。不过这还不是问题关键，IE６完全是属于占着茅坑不拉屎的那种，即使你不显示列表项符号，即把list-style-type设置成none，它依然会保留列表项符号占用的空间。所以无论你给LI的设置margin:0或者padding:0，你都会发现Li左边会多出16PX的空间。

既然知道问题的关键，解决起来就不难了，直接设置

list-style-position:outside;

 结论：做样式设计时，经常轻视全局初始样式的设置，结果由于不同浏览器对语法的解析存在不同，在后期进入局部详细设计时被折腾够呛。