CSS在Firefox中绘制箭头的问题

Question

背景

我使用伪元素:before和:after创建了一个纯CSS的工具提示，用于箭头。

在Chrome 16到Firefox 9和10之间，渲染效果不同。

您看出有什么问题了吗？

Chrome截图

火狐浏览器截图

演示

http://jsfiddle.net/wDff8/ 重现了相同的问题。

代码

html：

<span class="tooltip">Déposez votre fichier dans ce dossier</span>

css：

span.tooltip {
  display: inline-block;
  background: #eee;
  margin-left: 20px;
  padding: 0 10px;
  color: #111;
  border-radius: 2px;
  border-top: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  line-height: 1.5;
  position: relative;
}

span.tooltip:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: transparent #eee transparent transparent;
  left: -18px;
  top: -1px;
  z-index: 1;
}

span.tooltip:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px;
  border-color: transparent #bbb transparent transparent;
  left: -21px;
  top: -2px;
  z-index: 0;
}

body {
    font-family: Georgia;
    font-size: 12px;
    letter-spacing: 1px;
}

- GG.

---

在 Mac 上的 Firefox 9 和 Chrome 16 中，我没有看到您截图中的问题（即更粗的箭头指针）。您使用的是哪个版本？ - Paul D. Waite

你的HTML和CSS与截图不匹配（截图中的图标丢失了）。你确定你粘贴了正确版本的有问题的代码吗？ - Mr Lister

@PaulD.Waite：在Windows上，Chrome 16和Fx 9/10。http://jsfiddle.net/wDff8/可以重现相同的问题。 - GG.

@MrLister：我已经添加了body的CSS。 - GG.

@GG，感谢你提供的Fiddle，非常棒。嗯——在我的Mac上看起来还不错，虽然如果我调整border-width的值，可以让它变粗一些。你在Firefox中没有放大页面吧？放大似乎会导致你在Firefox截图中看到的效果。 - Paul D. Waite

Answer 1

也许你需要在你的css中写成rgba(238,238,238,0)来代替transparent，查看此链接获得更多信息。

Firefox 4中CSS透明边框问题？

- sandeep

---

太好了，它起作用了！箭头内容使用rgba(0,0,0,0)，边框使用rgba(238,238,238,0)看起来很不错。你是怎么找到rgba(238, 238, 238, 0)的？为什么是238？ - GG.

238,238,238是我从Photoshop获取的#eee的RGB值。 - sandeep

好的，但我不是很理解。我为内容设置了 border-color: rgba(0,0,0,0) #eee rgba(0,0,0,0) rgba(0,0,0,0);，为边框设置了 border-color: rgba(255,255,255,0) #bbb rgba(255,255,255,0) rgba(255,255,255,0);，渲染效果很好。 - GG.

Answer 2

解决方案

我只是移除了一些像素，这样在Firefox上就可以正确渲染了。

虽然渲染效果不完全相同，但已经足够接近了。

Chrome截图

Firefox截图

演示

http://jsfiddle.net/wDff8/1/

修改后的代码

span.tooltip:after {
  border-width: 10px;
  left: -19px;
  top: -1px;
}

- GG.