兼容：Firefox与IE下UL预设标志的异同
日期：2013-09-02 浏览次数：21030 次
列表UL或是OL中都有一个预设标记，这个标记可能是实点圆点，也可能是数字。在实际的使用中，我们需求去掉这个预设标记，但我们不清楚这个预设标记是存在于什么位置。由于IE与FF似乎在处理UL的预设标记时都有着不同的方式：我们来写一个UL的HTML代码结构：
HTML结构
这个UL在不同的浏览器中的显示基本上是差不多的。那么我们设定，一下CSS试着看一下IE与FF什么地方不一样：
CSS代码
如今只把padding的值设为0，这时我们看一下IE中除了多个背景之外并没有什么变化，但是FF中的预设标记不见了！这里要留意的是IE中的预设标记是在背景外的。我们再来换个方式来设置：
CSS代码
这里我们再看，情况相反，IE的预设标记不见了，而FF中的预设标记还在，这里要留意的是这时FF中的预设标记是在背景里的。当然我们这里有点不理解了，到底这是为什么呢？这个预设标记究竟是在什么地方的呢？下面我们通过一个实例来看一下UL的预设标记是在什么地方的！
HTML结构
CSS代码
这时我们看到，margin区域是最外围的白色部分，往里有点灰色的是border，再往里是更深一点的灰色，这个区域是padding，最深的区域是内容区。而预设标记正处在padding的区域，那么是不是说把padding区去掉这个预设标记就会消逝呢？我们把CSS做一下修正：
CSS代码
我们把padding设为0后发现预设标记仍然还在，不过这时他处在了border的上面，那么我们可以依据上面推测出预设标记并不存在于margin,padding或是border中，margin,padding与border只不过为预设标记提供了一个存在并显示的空间。而这个预设标记是浮于margin,padding与border之上的。
那么这时我们大致上可能曾经理解了，其实IE与FF对于UL的默认值的设定是不一样的，IE给了UL一个margin值，但是却没有给padding值，所以IE中UL的预设标记点是在背景外的。而FF相反给了一个padding值却没有给margin值，所以在FF中UL的预设标记点是在背景内的。但是依据上面的实例我们清楚，这个预设标记点不属于paading也不属于margin。他只属于内容部分，他不断是在内容的外边缘，当然我们还可以通过CSS来设置其在内容的内边缘。基本方式请查阅《CSS2中文手册》
通过上面的例子我们清楚了，想要让这个预设标记消逝光用margin:0;与padding:0;由于如果出现了border的宽度达到一定的数值时这个预设标记还是会出现的。所以正确的写法是：margin:0; padding:0; list-style:none;
虽然预设标记很不错，但是却没办法精确控制，所以在实际使用中并不推荐使用，还是用背景图来代替！
此帖在经典论坛发布后，有朋友提出了这样的问题：“把li的float属性设置为left之后，前面的预设标记在IE中就会消逝，而在FF中则正常存在，这时候IE把预设标记藏到哪里去了呢？”下面就这个问题做一下解释：
这个标记点去哪了？这是IE对这个预设标记层次的设定，在IE看来，这个预设标记与内容不在同一个等级上，当UL被设为float:left;时他被隐在了margin与border的下面，也许你不置信，但是这是理想。看下面的两个例子：
IE中消逝的预设标记：
被padding拉出来的预设标
HTML结构
<ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
这个UL在不同的浏览器中的显示基本上是差不多的。那么我们设定，一下CSS试着看一下IE与FF什么地方不一样：
CSS代码
ul {background:#ddd; padding:0; }
如今只把padding的值设为0，这时我们看一下IE中除了多个背景之外并没有什么变化，但是FF中的预设标记不见了！这里要留意的是IE中的预设标记是在背景外的。我们再来换个方式来设置：
CSS代码
ul {background:#ddd; margin:0; }
这里我们再看，情况相反，IE的预设标记不见了，而FF中的预设标记还在，这里要留意的是这时FF中的预设标记是在背景里的。当然我们这里有点不理解了，到底这是为什么呢？这个预设标记究竟是在什么地方的呢？下面我们通过一个实例来看一下UL的预设标记是在什么地方的！
HTML结构
<ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
CSS代码
ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; }
li {background:#aaa;}
li {background:#aaa;}
这时我们看到，margin区域是最外围的白色部分，往里有点灰色的是border，再往里是更深一点的灰色，这个区域是padding，最深的区域是内容区。而预设标记正处在padding的区域，那么是不是说把padding区去掉这个预设标记就会消逝呢？我们把CSS做一下修正：
CSS代码
ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }
li {background:#aaa;}
li {background:#aaa;}
我们把padding设为0后发现预设标记仍然还在，不过这时他处在了border的上面，那么我们可以依据上面推测出预设标记并不存在于margin,padding或是border中，margin,padding与border只不过为预设标记提供了一个存在并显示的空间。而这个预设标记是浮于margin,padding与border之上的。
那么这时我们大致上可能曾经理解了，其实IE与FF对于UL的默认值的设定是不一样的，IE给了UL一个margin值，但是却没有给padding值，所以IE中UL的预设标记点是在背景外的。而FF相反给了一个padding值却没有给margin值，所以在FF中UL的预设标记点是在背景内的。但是依据上面的实例我们清楚，这个预设标记点不属于paading也不属于margin。他只属于内容部分，他不断是在内容的外边缘，当然我们还可以通过CSS来设置其在内容的内边缘。基本方式请查阅《CSS2中文手册》
通过上面的例子我们清楚了，想要让这个预设标记消逝光用margin:0;与padding:0;由于如果出现了border的宽度达到一定的数值时这个预设标记还是会出现的。所以正确的写法是：margin:0; padding:0; list-style:none;
虽然预设标记很不错，但是却没办法精确控制，所以在实际使用中并不推荐使用，还是用背景图来代替！
此帖在经典论坛发布后，有朋友提出了这样的问题：“把li的float属性设置为left之后，前面的预设标记在IE中就会消逝，而在FF中则正常存在，这时候IE把预设标记藏到哪里去了呢？”下面就这个问题做一下解释：
这个标记点去哪了？这是IE对这个预设标记层次的设定，在IE看来，这个预设标记与内容不在同一个等级上，当UL被设为float:left;时他被隐在了margin与border的下面，也许你不置信，但是这是理想。看下面的两个例子：
IE中消逝的预设标记：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
ul {background:#ddd; margin:0 0 0 30px; border:30px solid #aaa; float:left;}
/*]]>*/
</style>
</head>
<body>
<ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
<ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
ul {background:#ddd; margin:0 0 0 30px; border:30px solid #aaa; float:left;}
/*]]>*/
</style>
</head>
<body>
<ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
<ul>
<li>建设部通报八起房地产买卖违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹要挟导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>
</body>
</html>
被padding拉出来的预设标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
