FFox 和 Chrome 中的伪元素对齐方式不同答案

【问题标题】：Pseudo element alignment different in FFox and ChromeFFox 和 Chrome 中的伪元素对齐方式不同
【发布时间】：2012-01-09 16:23:10
【问题描述】：

我正在尝试通过使用伪元素 ::before 和 ::after 仅使用 CSS 创建一个语音气泡。在 Chrome 中对我来说看起来不错，但在 Firefox 中三角形的轮廓看起来很乱。有谁知道是什么原因造成的，是否可以解决？

我使用的是 FF 9.0.1 和 Chrome 16。在 Firefox 中，我在三角形周围得到了奇怪的伪影，因此在 Chrome 或 IE9 中没有出现

【问题讨论】：

在 Windows 7 上的 Firefox 3.6.15 中看起来不错。事实上，除了没有圆角之外，它看起来比 Chrome 更好。
当我在 Firefox 和 Chrome 中打开时，您发布的小提琴看起来与我一模一样。您能否发布更多关于您所看到的内容以及您使用的 Firefox 版本的详细信息？

【解决方案1】：

当您将某些边框设置为透明而将其他边框设置为另一种颜色时，我在 Firefox 上遇到了三角形边缘周围的渲染伪影。它似乎无法正确显示彩色边框和透明边框之间的边界。不幸的是，我发现修复它的唯一方法是将它们全部设置为一种颜色，但不幸的是，在这种情况下这对你不起作用。

【讨论】：

这很烦人。即使 IE9 也能正确渲染，我发誓这在 FF8 中也能正常工作。
我会为自己省点麻烦并使用图像
经过一番阅读，我发现这个问题是由 Firefox 抗锯齿引起的。看来transparent 的值等于rgba(0,0,0,0)（透明黑色）。将 transparent 替换为 rgba(255,255,255,0) 可解决问题
哦，有道理。很有帮助。感谢您的更新！

【解决方案2】：

添加-moz-border-radius: 15px;到#bubble 容器供firefox 渲染它。

【讨论】：