FOX 和 Chrome 中的伪元素对齐方式不同
我正在尝试仅使用 CSS 通过使用伪元素 ::before 和 ::after 创建一个对话气泡。我在 Chrome 中看起来不错，但在 Firefox 中三角形的轮廓看起来很混乱。有谁知道是什么原因造成的以及我是否可以解决它？
我正在使用 FF 9.0.1 和Chrome 16。在 Firefox 中，我在三角形周围出现奇怪的伪影，而这些伪影在 Chrome 或 IE9 中不会出现
I'm trying to create a speech bubble just using CSS by using pseudo elements ::before and ::after. It looks fine to me in Chrome but the outline of the triangle looks messed up in Firefox. Does anyone know what causes this and if I can fix it?
I'm using FF 9.0.1 and Chrome 16. In firefox I get odd artifacts around the triangle that don't appear in Chrome or IE9 for that matter
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当您将某些边框设置为透明而将其他边框设置为另一种颜色时，我在 Firefox 上遇到了三角形边缘周围的渲染伪影。它似乎无法正确显示彩色边框和透明边框之间的边界。不幸的是，我发现解决这个问题的唯一方法是将它们全部设置为一种颜色，但不幸的是，在这种情况下这对你不起作用。
Those rendering artifacts around the edge of the triangle are something I've run into on Firefox when you set some borders to transparent and others to another color. It doesn't seem to be able to properly display the boundary between the colored border and the transparent ones. Unfortunately, the only way I have ever found to fix it is to set all four of them to a color, but unfortunately that won't work for you in this case.
添加-moz-border-radius: 15px;到 #bubble 容器，以便 Firefox 渲染它。
http://jsfiddle.net/K3YSy/13/
Add -moz-border-radius: 15px; to the #bubble container for firefox to render it.
http://jsfiddle.net/K3YSy/13/