2

我正在开发 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 之上编写CSS 时.frame:before，它起作用了！！

.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 语义？

4

2 回答 2

4

首先删除无效</img>的..

标签遗漏

该img元素是一个空元素。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);

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

于 2012-05-23T10:47:30.147 回答
-2

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

于 2012-05-23T11:58:42.207 回答