兼容:Firefox与IE下UL预设标记的异同

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

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

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做一下修改:

第 1 2 3 4 页

兼容:Firefox与IE下UL预设标记的异同

相关文章:

你感兴趣的文章:

标签云: