html – Firefox的CSS箭头渲染问题

概述上下文 我用伪元素做了一个纯CSS工具提示：之前和之后为箭头. 渲染不同于Chrome 16到Firefox 9和10. 你看错了什么？ Chrome截图 Firefox截图 演示 http://jsfiddle.net/wDff8/再现了同样的问题. 码 html： <span class="tooltip">Déposez votre fichier dans ce dossier</span 上下文

我用伪元素做了一个纯CSS工具提示：之前和之后为箭头.

渲染不同于Chrome 16到firefox 9和10.

你看错了什么？

Chrome截图

firefox截图

演示

http://jsfiddle.net/wDff8/再现了同样的问题.

码

html：

<span >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;}

解决方法 可能是你必须在你的CSS中写这个rgba(238,238,0)而不是透明,请查看此内容以获取更多信息

CSS Transparent Border Problem In Firefox 4?

总结

以上是内存溢出为你收集整理的html – Firefox的CSS箭头渲染问题全部内容，希望文章能够帮你解决html – Firefox的CSS箭头渲染问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。