热门文章 | 热门软件| 热门源码 | 热门电影 | 知识库 | 联系我们
软件 源码 教程 影视 健康 招聘
  HTML | JavaScript | ASP | PHP | JSP | NET | VB | VC | VF | Windows | Linux | Mysql | Mssql | Oracle | Struts 
当前位置: 创世纪计算机资源网 -> 文章频道 ->css 
站内搜索:
Firefox与IE下UL预设标记的异同(2)
作者:小毅 来源:毅博客 整理日期:2007-11-3

虽然预设标记很不错,但是却没办法精确控制,所以在实际应用中并不推荐使用,还是用背景图来代替!


--------------------------------------------------------------------------------
此帖在经典论坛发布后,有朋友提出了这样的问题:“把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也看不到预设标记想可能与所在的显示层次有关。但是现在还没有一定的证据来证明这种现象的真实原因!

 

[1]  [2]  
相关文章
暂无