瀏覽器兼容性問題

我有使用goove邊界，因爲它會在瀏覽器（Firefox）比其他的一個非常不同的並沒有多少根據W3規範中的一個問題：瀏覽器兼容性問題

w3.org：「看起來好像它是在畫布上雕刻的（這通常通過創建來自兩種顏色的」影子「來實現，這兩種顏色比」邊框顏色「更淺和）。」

Firefox的版本是明確地說不是「稍微」輕一點，並且在黑暗的背景下會導致問題。

Groove Border 是否有技巧或技巧來解決這個問題，讓它看起來更接近中間的鍍鉻版本？

2014-11-14 Yevgen

你可以做的不多。瀏覽器是如何選擇解釋規範的。 – 2014-11-14 20:32:37

您可以使用僞元素與元素，方向相反的顏色排列一半邊界模擬效果

.a { 
    border: 60px groove #233232; 
    width: 100px; 
    height: 100px; 
} 

.b { 
    border: solid 60px #233232; 
    border-top-color: red; 
    border-left-color: red; 
    width: 100px; 
    height: 100px; 
    position: relative; 
    left: 300px; 
    top: -220px; 
} 

.b:after { 
    content: ''; 
    position: absolute; 
    left: -30px; 
    top: -30px; 
    width: 100%; 
    height: 100%; 
    border: solid 30px #233232; 
    border-bottom-color: red; 
    border-right-color: red; 
}

demo

我選擇紅色的演示，使它更可見。但當然，你可以將它設置爲你想要的任何東西

來源

2014-11-14 20:34:48 vals

這是一個非常好的解決方法。我將它簡化爲只需要底部邊框的需要：http://jsfiddle.net/mLt1yvLw/1/ - 它實際上是類似的（只是如果沒有完成所有四面），我的原始想法是隻添加一組備用的div標籤周圍的框和添加另一種顏色的底部邊框到該div。 - 無論如何，我將不得不重新選擇大量修改已經非常複雜的網站，因爲這樣或者只是選擇另一種顏色，這兩種瀏覽器都可以更好地工作。 - 謝謝你的幫助。 – Yevgen 2014-11-14 23:02:03

瀏覽器兼容性問題

回答

相關問題