這是我在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);
}
我似乎無法找到解決這個問題的正確方法。
請原諒我溫和的英語,這不是我的主要語言。
'outline'通常用於顯示某個元素的焦點,firefox會概括包含該box-shadow的整個元素。我建議避免使用「大綱」,因爲默認行爲因瀏覽器而異。 – 2013-03-22 13:57:13
感謝您的評論。有沒有什麼辦法模仿輪廓的外觀?因爲在這種情況下它確實給了設計一個額外的東西。 – 2013-03-22 14:10:42
實際上,您可以嘗試使用'outline-offset'來查看是否有任何效果。嘗試添加'outline-offset:0px;' – 2013-03-22 14:21:00