Niquelao » 博客档案 » Pero, será lista!!

» 博客档案 » Pero, será lista!! Niquelao - CSS 它会变聪明吗!! 2006 年 11 月 3 日，Maroto 写的。我们并不太确定，至少有些人不确定，而另一些人因为已经对可怜的浏览器失去了信心，不再给它任何机会。 尽管我们有着深厚的标准主义根基，但我们还是决定给它留一线机会。 随着我们的解释，你们会倾向于两种观点之一。最近我喜欢用复数，就好像我的同伴（虽然不是朋友）同意我的看法一样。那个 Rumo，那个 Rumo，嘿，嘿！！有什么问题吗？ 好，首先我们有一个有序列表，就是典型的步骤列表。到目前为止，一切正常。但利用 CSS 的优点，我们希望以水平方式呈现列表元素。 到了这一步，我们有几种选择：给列表元素设置 display: inline 属性，或者将列表元素浮动到一边 float: left。这时第一个问题出现了：列表标记（数字或圆点）消失了，在 IE 中总是如此，在 FF 中偶尔发生。 “神圣经文”怎么说？瞧，IE 又出错了！！那么面对这一切，“神圣经文”是怎么说的？ CSS 2.1 规范的 12.5 节明确指出，对于列表的视觉布局，这些元素具有如下属性：display: list-item，它会生成一个块级盒子，该盒子包含一个可选的标记（数字或圆点）和元素内容。 同样，所有影响列表元素的属性都有一个小限制：仅适用于 display: list-item 的元素。至于“可选”一词，已经留下了很多操作空间，尤其是对于某些人来说。通过这段“经文”，我们找到了其中一个问题的解决方案：一旦我们为列表元素声明 display: inline 属性，这些元素的属性（类型、位置、背景）就不再起作用。重复一遍，规范很明确：仅适用于 display: list-item 元素。在 CSS 2.1 规范之前的一个章节，具体是第 9 章（视觉格式模型），有一个专门讨论 display、position 和 float 属性组合时元素关系和反应的章节（第 9.7 节）。正如我们将看到的，这个主题直接影响元素的呈现。总的来说，它告诉我们大多数元素在应用 float 属性时，也会变为 display: block，除了极少数情况，其值保持不变。具有 display: list-item 属性的元素不应该改变。这是 CSS 2.1 的具体说明。 CSS 2 规范（现行的 W3C 建议，尽管不是最常用的）对所有浮动元素应用 display: block 属性。瞧，谁想找个理由来为 IE 辩护，只要基于这个前提就行。 ¿Qué puedo hacer para que se vea igual en ambos navegadores？再一次，我们没有找到任何 hack 来解决它，但因为我们很有资源，所以给你们几个主意：在所有情况下删除标记：list-style: none；在所有情况下删除标记并添加替代文本（如果合适的话）。在没有 CSS 支持时，在有序列表中使用数字会给我们带来问题。如果我们在数字后面加上文本，效果会更好（步骤 1，步骤 2 等）。在所有情况下删除标记，并通过样式表添加背景图像。

如果使用数字，这个方案会增加标记量，因为我们需要为每个数字声明一张图像。 Un par de curiosidades … ¿Sabes que si se aplica el el valor display: inline al elemento ol nuestro amigo FF inicializa todos los marcadores de lista a 0 ？如果给有序列表的元素设置宽度 (width)，IE 也会发生类似情况。 En este caso todos los marcadores se inicializan a 1 .参考 特定 CSS 2.1 特定 HTML 4.01 类别：CSS、(X)HTML —> 2 条注释 Lector anómino 7 de Noviembre de 2006 Creo que hay poco contre entre el color de fondo y de prime plano de ciertos elementos.有传言称 2006 年 11 月 7 日将进行修订。发布 RSS 2.0 的后续评论。请参阅评论，或欣赏您所在位置的引用。前面的文章： Me paso al lado oscuro 后面的文章： Yo también lo he visto… Deja tu comentario Los Campos Nombre y Email son obligatorios Añádenos a… Tags que destacamos en General accesibilidad conocimiento CSS estándares fieldset Firefox 格式公式隐藏 ie IE 7 信息javascript 传奇 lista niquelando obligatorio opera xhtml