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 */
}

JSF中：

http://jsfiddle.net/CF7P2/

铬合金：

火狐：

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

Answer 1

在 Firefox 中，向外box-shadow推。outline（不确定是错误还是功能...）

方法一

我会通过将它包装在另一个中来实现你想要做的事情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 */
}

方法二

outline-offset如果您不想使用包装器，可以使用Firefox CSS hack 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;
}