2

私はRuby-on-Rails3.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;
}​

私が直面している問題は、適用されたCSSが機能しimg.frame-imageていない/適用されていないことです。Chrome18とFireFox12を試してみました。Chromeの要素インスペクターまたはFireBugにスタイルが表示されません。また、他のCSSによって上書きされることもありません。

デモでは、このためにjsfiddleを作成しようとしました。そこで動作します！

しかし、驚くべきことに、img.frame-imageCSSの上に.frame:beforeCSSを書くと、うまくいきます!!

.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要素は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);

ファイヤーバグコンソールから、それが修正されることがわかります..（スクリプトが行う唯一のことは、間違ったルールを削除し、最初の文字を削除した後にそれを再挿入することです）

于 2012-05-23T10:47:30.147 に答える
-2

名前をframe-imageからframeImageなどに変更してみてください。ハイフンを削除しますか？

于 2012-05-23T11:58:42.207 に答える