html - FireFox が div の端から遠く離れたアウトラインを描画するのはなぜですか?

Question

スタイル：

#logo {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 120px;
    height: 72px;

    background-color: #abc;
    color: black;
    outline: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);

    /* The background image is set inline */
}

JSFiddle:

http://jsfiddle.net/CF7P2/

クロム：

ファイアフォックス:

FireFox バージョンがボックスから遠く離れたマージンを描画するのはなぜですか? そうしないようにすることはできますか、それとも他の方法を使用して同じ視覚的な結果を得ることができますか?

Answer 1

Firefox では、外側にbox-shadowプッシュします。outline(バグによるものか機能によるものかはわかりません...)

方法 1

div別の でラップし、それに を適用することで、あなたがやろうとしていることを達成できますbox-shadow。

そのようです：

フィドル

<div id='logo_wrapper'> ... </div>

<!-- -------------------- -->

#logo, #logo_wrapper {
    width: 120px;
    height: 72px;
}
#logo_wrapper {
    position: absolute;
    top: 14px;
    left: 14px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
}
#logo {
    background-color: #abc;
    color: black;
    outline: 1px solid rgba(255, 255, 255, 0.2);

    /* The background image is set inline */
}

方法 2

outline-offsetラッパーを使用したくない場合は、Firefox CSS ハックを使用できますdiv。21pxでは、なぜ代わりに15px;を使用したのか聞かないでください。テストでその値になりました... で動作するはずでし15pxた。

フィドル

body {
    background-color: #444;
}

#logo {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 120px;
    height: 72px;

    background-color: #abc;
    color: black;
    outline: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);

    /* The background image is set inline */
}
#logo, x:-moz-any-link {
    outline-offset: -21px;
}