Niquelao » 博客档案 » 空间和伪问题

» Archivo del weblog » Problemas de espacio ypseudo-elementos Niquelao - CSS Problemas de espacio ypseudo-elementos 7 de September, 2006 por Maroto 发现这种 bug 挺奇怪的，也就是说，这简直是个破烂小问题，要么是你太闲了，要么就是极大的巧合让你注意到了。而且，还是在太晚的时候。一年多以前，Maxgeek、Satzansatz 以及其他一些地方已经写过同样的内容了。进入正题。 发生了什么？当我们使用 CSS 2.1 规范定义的伪元素 :first-letter 和 :first-line 时（我们忽略 :first-child 等伪元素，因为我们的朋友 IE 基本不管它们），我们可以发现有时无法获得预期的结果。 怎么回事？不可思议的是，IE 在解析 CSS 语法时出错了。如果在这些伪元素之后直接使用大括号 ( { ) 开始声明而没有留空格，IE 就无法解析。 Lo puedes ver en el ejemplo uno 。 p:first-line { color: blue; font-weight: bold; } 如果我们尝试在同一个声明中为多个元素提供通用属性，且这些元素由逗号 ( , ) 分隔，情况也是一样。 Lo puedes ver en el ejemplo dos 。 p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } 那么解决方案呢，如果有的话？在这种情况下，它是存在的且相对简单。只需在伪元素与要应用的符号（无论是逗号 ( , ) 还是大括号 ( { )）之间留一个空格。 Si no te lo crees, aquí tienes el ejemplo tres . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; }嘿！！还没完！我们发现的另一个小问题来自列表。现在怎么了？如果我们对列表元素的伪元素 :first-letter 应用样式，IE 会很“贴心”地将其传播到列表元素自身的标记上（无序列表为圆点，有序列表为数字或字母）。简直难以置信，快看示例四。这个乱局怎么解决？如果你接受章鱼作为宠物，我们就说通过 li {list-style:none} 删除列表标记即可。否则，也没办法。其他详细信息很重要，例如 IE7b2 le da igual que no haya entre el 伪元素和字符 { 。这是重要的，也是重要的。 既然说到这，特异性（specificity）怎么处理？没什么好处理的，至少在 IE 中是这样。首先我们要知道，这些伪元素仅（虽然已经不少了）影响块级元素。 好，如果我们为例如一个段落定义了一些属性，接着为另一个出现在引用块 ( blockquote ) 内部的段落定义其他属性，那么这两个段落将具有相同的特性（当然，前提是我们记得在伪元素和它那美妙的符号之间留出相应的空格）。 Todo resumido en el último ejemplo ？ Como hoy ya me cansé， la buscas tú。 类别： CSS —> Puedes hacer un seguimiento de los comentarios al feed RSS 2.0 。 blockquote bug 可以引用 conocimiento CSS escuas estándares fieldset Firefox 格式公式隐藏 ie IE 7 信息 javascript legend lista niquelando obligatorio opera playa q squash vacaciones w3c WCAG xhtml Esta obra está bajo una licencia de Creative Commons .