Question

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

UPDATE: 移除了 lt;/img> 标签,如

.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 应用到 < code> img. frame-image 上没有效果/没有被应用。我在 Chrome 18 和 FireFox 12 上试过。我看不到 Chrome 元素检查员或 FireBug 的风格, 也没有被其他 CSS 取代。

我试图为演示创建 < a href=> "http://jsfiddle.net/Bongs/2CeFN/" rel="notfollow noreferrer"\\ strong>jsfidle 。它在那里有效!

但当我在 < code>. 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;
}

为何会发生? 是框架(RR)相关议题还是CSS语义?

Answer 1

首先,删除lt;/img> 的以下文字: 。

< 强力 > 塔格遗漏

img 元素是一个无效元素。 img元素必须有一个启动标签 < 坚固>, 但不能有的结束标签。

Make sure that the CSS is loaded (and not using a cached version).
Also make sure that there is no script that might be removing/altering your classes.

(i 还希望 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

尝试将名称从框架图像更改为框架图像还是什么? 删除连字符吗?

友情链接