虽然预设标记很不错,但是却没办法精确控制,所以在实际应用中并不推荐使用,还是用背景图来代替!
--------------------------------------------------------------------------------
此帖在经典论坛发布后,有朋友提出了这样的问题:“把li的float属性设置为left之后,前面的预设标记在IE中就会消失,而在FF中则正常存在,这时候IE把预设标记藏到哪里去了呢?”下面就这个问题做一下解释:
这个标记点去哪了?这是IE对这个预设标记层次的设定,在IE看来,这个预设标记与内容不在同一个等级上,当UL被设为float:left;时他被隐在了margin与border的下面,也许你不相信,但是这是事实。看下面的两个例子:
IE中消失的预设标记:
XML/HTML代码
<!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>
被padding拉出来的预设标记
XML/HTML代码
<!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; padding: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>
由此我们可以推断IE是这样来解释的:在UL有了float:left;的属性后,预设标记的层次应该在margin与border之下,在padding之上。而在FF中,预设标记是与内容一起高于margin,border,padding的。
至于LI在设定float:left;之后为什么IE也看不到预设标记我想可能与所在的显示层次有关。但是我现在还没有一定的证据来证明这种现象的真实原因!