CSS边框左/右未正确显示

*编辑

我跳了一点枪，是边界底部引起的

新问题:

能否从边框中删除画框效果？

---

我在一个div上有一个CSS代码：

border-left: 5px solid #009933;

它在Safari中显示良好：

但它在Firefox和Chrome中显示如下：

所以我想我的问题是，为什么Firefox和Chrome的显示方式不同，我如何让它看起来像Safari的显示方式

---

谢谢

不同浏览器的边框角的精确渲染不同

对于较厚的边框，浏览器尝试在边框之间创建对角线边界。右角的像素可以从其中一个边框获得颜色：

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

或其他边界：

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

不同的浏览器将使用这两种方法中的任何一种，但在元素的所有四个角上都不同。我曾经比较过不同浏览器的使用情况，几乎每个浏览器供应商都不遗余力地选择了一种其他浏览器无法使用的方法

在您的例子中，Firefox和Chrome碰巧在左下角使用水平边框颜色作为边界

要使侧边界位于外部，即：

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

您可以在另一个元素中使用一个元素，并在外部元素上设置垂直边框，在内部元素上设置水平边框

示例（使用夸张的边框宽度以显示效果）：

.outer{边框：10px#0c0；边框样式：无实体；}
.inner{border:10px#ccc；边框样式：solid none；}

---

Demo

你能在这里摆弄一下吗-->你有“重置”css表吗？它可以帮助您“删除”每个浏览器默认拥有的样式。也许这就是原因。如果没有（我不建议这样做），请尝试至少设置边距：0；和填充：0；对于你的身体来说，如果没有更多相关元素的信息（标记和CSS），这将很难回答。在FF和Chrome中，右边的元素之间有水平边框，“D”元素也有不同的背景色。这是默认的浏览器行为。为什么不将边框添加到不同的元素中？