css - Webkit と Gecko での CSS の「概要」の異なる動作動作

Question

私は実験に取り組んでいますが、「アウトライン」CSS2 プロパティが Webkit と Gecko で同じように実装されていないことがわかりました。

以下のスクリプトでは、別の div 内に絶対位置 div がありますが、その外側に浮かんでいます。Webkit のアウトラインは実際の親 div のアウトラインを示しますが、Gecko では子アイテムをカバーするように展開されます。

http://jsfiddle.net/KrCs4/

何か不足していますか？Gecko で上書きする必要があるプロパティはありますか? またはバグとして報告する必要がありますか？

Webkit スクリーンショット:

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

編集：

これはバグであることが確認されており、回避策は次のとおりです: 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現時点では、絶対配置を親から削除し、それを相対的に配置する以外に、実行可能な回避策はありません。