浏览器兼容性问题

我有使用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

浏览器兼容性问题

回答

相关问题