CSS边框左/右未正确显示答案

【问题标题】：CSS border-left/right not displaying properlyCSS边框左/右未正确显示
【发布时间】：2015-01-01 15:23:47
【问题描述】：

*编辑

我有点过分了，它是导致它的边界底部。

新问题：

可以去掉边框的相框效果吗？

所以我在 div 上有这个 CSS 代码：

border-left: 5px solid #009933;

在 Safari 中显示正常：

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

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

谢谢

【问题讨论】：

你能在这里做小提琴吗--> jsfiddle.net
你有一个“重置”的 CSS 表吗？它可以帮助您“删除”每个浏览器默认具有的样式。也许这就是原因。如果您没有它（我不推荐），请尝试至少设置 margin:0;和填充：0；对你的身体
如果没有所涉及元素的更多信息（标记和 CSS），这将很难回答。在 FF 和 Chrome 中，右侧元素之间有水平边框，而“D”元素也有不同的背景颜色。
这是默认的浏览器行为。为什么不给不同的元素添加边框？

标签： css

【解决方案1】：

边框角的确切呈现因浏览器而异。

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

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

或其他边框：

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

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

在您的情况下，Firefox 和 Chrome 恰好使用水平边框颜色作为左下角的边界。

要让侧边框在外面，即：

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

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

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

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

&lt;div class="outer"&gt;&lt;div class="inner"&gt;Demo&lt;/div&gt;&lt;/div&gt;

【讨论】：