Firefox中的CSS三角形问题答案

【问题标题】：CSS triangle issue in firefoxFirefox中的CSS三角形问题
【发布时间】：2025-11-28 08:00:02
【问题描述】：

我需要使用 CSS 三角形来创建和箭头。这是我正在研究的：http://jsfiddle.net/7vRca/

<div class="arrow-outer"></div>

.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;

}

问题是在 chrome 中它看起来很完美。但是在Firefox中，中间有一个小弯。

知道为什么会发生这种情况，我怎样才能让它看起来像在 chrome 中一样平滑？

【问题讨论】：

在 win7-FF17.01 和 Chrome 23.0.1271.97 上的两个浏览器中对我来说看起来都一样
我看到中间有一个小 1px 粗糙/破损的边缘，两个边界相遇。我正在使用 mac osx。
我确实没有在 jsfiddle、FF17.0.1、Win8 ... 中看到它。
那我怎么看到了？！任何想法？我已经发布了截图。
@goose 当您按下Ctrl + 0（重置缩放）时会发生什么？有时，当您放大/缩小时，锯齿会变得混乱。

标签： google-chrome firefox css

【解决方案1】：

不幸的是，我没有要测试的 mac，Windows 上的 Firefox 似乎可以正确呈现。不过你可以解决这个问题......

.arrow-outer {
  border: 2em solid transparent;
  border-right: 0;
  border-top-color: #3bb0d7;
  height: 0;
  width: 0;
}

它不是将三角形渲染为边框的两侧，而是将右边框变平以仅使用顶部边框实现相同的形状，从而避免任何对齐问题（如下图所示）。

Mac OS 上的 Firefox 可能会将 div 渲染为像素高度，这可能会使用溢出隐藏来解决，但渲染算法中的舍入导致选择不同像素的可能性相同（如果不是更有可能）用于浏览器和操作系统组合的右边框边缘。这就是我对它发生原因的猜测。

【讨论】：

太棒了！那解决了它。 :) 你能帮我理解这里发生了什么吗？
我已经添加了一些关于为什么会发生这种情况的猜测。我假设您了解我的解决方法是如何工作的。如果你不知道，请告诉我

【解决方案2】：

为透明边框设置“插入”对我有帮助。我在这里找到了这个技巧：http://css-tricks.com/snippets/css/css-triangle/#comment-103785

【讨论】：

【解决方案3】：

尝试将其添加到 css 中：

 -moz-transform: scale(.9999);

【讨论】：

【解决方案4】：

尝试使用 RGB 代替透明，

<div class="arrow-outer"></div>

.arrow-outer{
   border: 1em solid rgba(255,255,255,0);
   border-top-color: #3bb0d7;
   border-right-color: #3bb0d7;
   height: 0;
   width: 0;
}

正如我们在这里所做的那样：Weird dark border :after css arrow in Firefox

编辑：顺便说一句，它在我的 Firefox 中以两种方式工作（一个带有灰线，其他没有，但从来没有你描述的效果......）

【讨论】：

对不起，我无法重现它：/