css - 悬停时围绕框阴影的 Firefox 轮廓

Question

这是我在 StackOverflow 上的第一个问题，所以我会尝试以正确的方式格式化它。

基本上，我有一个带有边框和轮廓的 div。悬停时，div 也会有一个阴影，当然，它应该在轮廓之外。这适用于所有浏览器，除了 firefox。出于某种原因，Firefox 似乎在框阴影之外呈现轮廓。可以在这里看到一个例子:http://rubencoolen.be/test.php

这是我的 CSS:

.block {

    background: #eceeeb;
    border: 3px solid white;
    outline: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;

}

.block:hover {

    background: whitesmoke;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    -moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);

}

我似乎找不到解决这个问题的正确方法。

请原谅我的英语不太好，这不是我的主要语言。

Answer 1

您可以只嵌套 div 以提供与大纲相同的效果:

<div class='outline'>
    <div class="block">Test</div>
</div>

然后添加更改css:

.block {
    position:absolute;
    top:0px;
    left:0px;
    background: #eceeeb;
    border: 3px solid white;
    width: 234px;
    padding: 10px;
    float: left;
    height: 124px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;
}

.outline {
    position:relative;
    border: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
}

This works in both latest versions of Chrome and Firefox