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

列表UL或是OL中都有一个预设标记,这个标记可能是实点圆点,也可能是数字。在实际的应用中,们需要去掉这个预设标记,但们不清楚这个预设标记是存在于什么位置。因为IE与FF似乎在处理UL的预设标记时都有着不同的方式:们来写一个UL的HTML代码结构:

XML/HTML代码
<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的预设标记是在什么地方的!

XML/HTML代码
<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;}   

这时们看到,margin区域是最外围的白色部分,往里有点灰色的是border,再往里是更深一点的灰色,这个区域是padding,最深的区域是内容区。而预设标记正处在padding的区域,那么是不是说把padding区去掉这个预设标记就会消失呢?们把CSS做一下修改:

CSS代码
ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }    
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;

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