CSS边界左/右不能正确显示

我把枪稍微跳了一下，它的边界底部导致了它。

新问题：

您可以从边框中删除相框效果吗？
enter image description here

所以我有一个div这个CSS代码：

border-left: 5px solid #009933;

它显示了优良的Safari：
enter image description here

但它显示像这样在Firefox和Chrome：
enter image description here

所以我想我的问题是，为什么Firefox和Chrome显示它不同，我怎么能让它看起来像Safari显示它？

谢谢

你能把小提琴的位置 - > http://jsfiddle.net/ – 2014-11-05 12:28:36

你有一个“重置”的CSS表？它可以帮助你“删除”每个浏览器默认的样式。也许这就是原因。如果你没有它（我不推荐）尝试设置至少保证金：0;和填充：0;对你的身体 – 2014-11-05 12:29:06

这将是很难回答，没有更多的信息（标记和CSS）的相关元素。在FF和Chrome中，右侧的元素之间有水平边框，“D”也有不同的背景色。 – 2014-11-05 12:29:10

不同浏览器之间的边框角落的确切呈现方式不同。

如果边框很粗，浏览器会尝试在边框之间创建对角线边界。就在角落里的像素可以从边框的一个获取颜色：

****************** 
+***************** 
++**************** 
+++*************** 
++++ 
++++ 
++++

或其他边境：

+***************** 
++**************** 
+++*************** 
++++************** 
++++ 
++++ 
++++

不同的浏览器将使用任意这两种方法，但不同的在所有四个元素的角落。我曾经比较过不同的浏览器使用什么，而且几乎看起来每个浏览器供应商都采取了一种没有其他浏览器使用过的方法。

就你而言，Firefox和Chrome碰巧使用水平边框颜色作为左下角的边界。

为了让侧边框走在外面，即：

++++****************** 
++++****************** 
++++****************** 
++++****************** 
++++ 
++++ 
++++ 
++++

你会用一个元素中的另一个，并设置外部元件上的垂直边框和水平边框内部零件上。

例（用夸张的边框宽度，只是为了显示效果）：

.outer { border: 10px #0c0; border-style: none solid; } 
 
.inner { border: 10px #ccc; border-style: solid none; }

<div class="outer"><div class="inner">Demo</div></div>

2014-11-05 12:47:30 Guffa

回答