在伪元素不起作用后编写的 CSS

Question

我正在研究 Ruby-on-Rails 3.2.1。我遵循 DOM 结构。

更新:删除了 </img> Gaby 提到的标签.问题仍然存在。

<div class="frame">
        <img src='SOME_PATH' class="frame-image">
</div>​

然后是 CSS

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
.frame:before
{
    position:absolute;
    content:'';
    border:2px solid #F2F2F2;
    height:100%;width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
img.frame-image     /* IT WON't BE APPLIED?! */
{
    min-width:30px;min-height:30px;
    max-width:200px;max-height:200px;
}​

我面临的问题是，CSS 应用于 img.frame-image不工作/没有得到应用。我在 Chrome 18 和 FireFox 12 上试过。我没有在 Chrome 的元素检查器或 FireBug 中看到样式。它也不会被任何其他 CSS 覆盖。

为了演示，我尝试创建 jsfiddle为了这。它在那里工作!

但令人惊讶的是，当我写 img.frame-image上面的 CSS .frame:before CSS，它有效!!

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
img.frame-image        /* NOW IT WILL BE APPLIED */
{
    min-width:30px;min-height:30px;
    max-width:200px;max-height:200px;
}​
.frame:before
{
    position:absolute;
    content:'';
    border:2px solid #F2F2F2;
    height:100%;width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

知道为什么会这样吗？是框架 (RoR) 相关问题还是 CSS 语义？

Answer 1

首先删除 </img>作为that is invalid ..

Tag omission

The img element is a void element. An img element must have a start tag but must not have an end tag.

确保已加载 CSS(并且未使用缓存版本)。
还要确保没有脚本可能会删除/更改您的类。

(我也希望 CSS 中的注释只是为了堆栈溢出，因为它们是无效的)

---

更新

Firebug 在规则的开头显示了一个奇怪的空格，所以我运行

var txt = document.styleSheets[0].cssRules[3].cssText;
console.log(0, ':', txt[0],':', txt.charCodeAt(0) );

得到8203作为 charCode ...

这是零宽度空格字符。您需要将其删除，因为它被用作选择器的一部分(因此失败)。

---

要实时查看更改，请尝试运行

var txt = document.styleSheets[0].cssRules[3].cssText;
var fixedRule = txt.substring(1);

document.styleSheets[0].deleteRule(3);
document.styleSheets[0].insertRule(fixedRule, 3);

从 firebug 控制台，你会看到它会被修复..(脚本唯一做的就是删除错误的规则并在删除第一个字符后重新插入它)