IE CSS Bug系列:列表标签没有项目符号/数字编号的Bug

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@nighca 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

<ul><ol>没有符号(编号)的Bug

影响的IE版本

这个bug影响IE7, IE6

表现

<ul><ol>元素的项目符号/数字编号消失不见

教程编写时间

2009.7.18 12:44:17

描述

这是个极好的bug。假定你有一个<ul><ol>元素,然后你给它设置了宽度属性…发生了什么:它们在IE下获得了“layout”,然后将它的项目符号/数字编号藏起来了。

演示

由于bug的性质,演示在一个单独的页面

HTML Code:

CSS Code:

我给列表添加了margin-left来使项目符号相对边缘偏移。<ul>/<ol>元素的“layout”会触发该bug。在我的演示中,“layout”是通过宽度属性获得的,而你可能碰到各种其它的原因,包括对相对布局bug的修复行为。

 

解决方案

以下是上述bug的解决方法(以类型排序)

解决方法

该方法的时间

2009.7.18 13:01:23

可修复的的版本

所有受该bug影响的版本

描述

在我看来,IE的行为是这样的,这些项目符号/数字编号是在<li>元素上的,并超出了<ol>/<ul>元素。<ol>/<ul>元素获得布局(“layout”)后,这些符号就不会被绘制了。我们来看下修复的演示,我会解释下我所做的事。

由于bug的性质,修复bug的演示在一个单独的页面

HTML Code:

CSS Code:

这里我所做的是将margin-left<ol>/<ul>转移到<li>元素,现在项目符号/数字编号都显示正常。

2em 并不是一个特别的值,我只是在这里取了这么多;如果对你不适合,可以修改。

注意:如果你的margin值都为零值,你要做的就是给<li>元素设置margin-left值,并给<ol>/<ul>元素设置相等(但取负)的margin-left值。

 

 

收藏 评论

关于作者:nighca

(新浪微博:@nighca) 个人主页 · 我的文章 ·   

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部