Question

我正在开发Ruby-on-Rails 3.2.1。我遵循DOM结构。

更新：删除了Gaby提及的</img>标记。问题仍然存在。

<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;
}

我遇到的问题是，应用于img.frame-image的CSS无效/未应用。我尝试使用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 ..

标记省略

img元素是一个void元素。 img元素必须包含的开始标记，但不得包含结束标记。

确保已加载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控制台的

，你会看到它将被修复..（脚本唯一能做的就是删除错误的规则并在删除第一个字符后重新插入）

Answer 2

尝试将名称从frame-image更改为frameImage或其他什么？删除连字符？

伪元素无效后编写的CSS

2 个答案: