Firefox 的透明边框上出现不想要的轮廓答案

【问题标题】：Undesired outline appearing on transparent border in FirefoxFirefox 的透明边框上出现不想要的轮廓
【发布时间】：2012-03-13 17:40:50
【问题描述】：

我已经在http://jsfiddle.net/ngChu/建立了一个例子

当使用div:after 选择器并使用在顶部和底部具有透明颜色的边框时，Firefox 似乎会创建不希望的轮廓。此轮廓在 Safari/Chrome 中不可见。

编辑：理想的外观是看不到轮廓。

我看过一些与此问题相关的帖子，但我想知道是否有更好的解决方案来解决我的具体问题。

【问题讨论】：

首先，边框没有半透明颜色，您只需将上下设置为透明，将左右设置为白色。第二 - 此方法依赖于供应商特定的渲染，不推荐使用。要创建可靠的阴影，最好将 :after 元素设置为块级显示，并将其宽度和高度设置为与其前一个容器相同的值，而不是设置其背景颜色并稍微偏移。

【解决方案1】：

按照我在评论中描述的推荐技术尝试edited jsFiddle。

【讨论】：

谢谢。对不起，如果我不够清楚，但这并不是我想要做的。出于演示的目的，我想要与我发布的小提琴中相同的形状，但我不想看到阴影。
我的错，我现在看到你正试图摆脱阴影。请让我知道你想要做什么，从更广泛的意义上说 - 这些形状的目的是什么？另外 - 你使用的是什么版本的 Firefox？
看看这个链接nicolasgallagher.com/pure-css-speech-bubbles/demo我已经做了一些对话泡泡，比如页面中间有粗绿色边框的泡泡。如果您在 Firefox 上仔细观察，您会看到一个阴影，对话气泡的一小部分与气泡的其余部分连接在一起。
看看my speech bubbles on jsFiddle，FireFox 上没有“影子”。
谢谢，但我已经设法通过更改 :after 边框的大小来减少阴影造成的损害。你知道为什么会出现阴影吗？