書籍 WebkitとGeckoのCSSの "概要"違う振る舞い



webkit blink (2)

私は実験に取り組んでいて、CSS2の「アウトライン」プロパティがWebkit&Geckoで同じ方法で実装されていないことが分かった

下のスクリプトでは、別のdiv内の絶対位置divがありますが、divの外側には浮動小数点があります。 Webkitのアウトラインは実際の親divを概説していますが、Geckoでは子項目をカバーするように拡張されています。

http://jsfiddle.net/KrCs4/

私は何か不足していますか? Geckoで上書きする必要のあるプロパティはありますか? バグとして報告されるべきですか?

Webkitスクリーンショット:

Firefoxのスクリーンショット:

編集:

これはバグであることが確認されており、回避策があります: http://jsfiddle.net/7Vfee/ : http://jsfiddle.net/7Vfee/ (この回避策を動作させるには、親が配置されていることを確認する必要があります。


Answer #1

私は同じ問題を抱えていたので、アウトラインを使用してボックスシャドーを使用するのではなく、

box-shadow: 0px 0px 0px 1px #FFF;

の代わりに

outline:1px #dcdcdc solid;

Answer #2

Geckoのこの一貫性のない動作は、よく知られており、MDNではなくSitePoint Referenceで奇妙なことにはっきりと文書化されています

バージョン3.5までのFirefoxは、要素の実際の設定ディメンションの周りではなく、境界をオーバーフローした要素のコンテンツの周りにアウトラインのアウトラインを描画します。

これは引き続きすべてのバージョンのFirefoxに影響します。 私は現時点で実行可能な回避策を見ていませんが、あなたの絶対的に位置づけられたdivを親から削除し、それを相対的に配置すること以外は何か他のものになります。





gecko