为什么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：

为什么FireFox版本距离盒子的距离如此之远？我可以阻止它这样做，还是可以使用其他方法获得相同的视觉效果？

Answer 1

在Firefox中，box-shadow向外推送outline。 （不确定是通过bug还是功能......）

方法1

通过将其包装在另一个div中，然后将box-shadow应用于此，我将实现您要做的工作。

像这样：

Fiddle

<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，可以使用div和Firefox CSS hack。现在，请不要问为什么我使用21px代替15px;我通过测试达到了这个价值...... 应该与15px合作。

Fiddle

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;
}