奇怪的黑暗边框：在Firefox中的css箭头后 [英] Weird dark border :after css arrow in Firefox

问题描述

为了在纯CSS中为我的工具提示创建一个箭头，我在Firefox中遇到了一个问题：

我试图在Firefox中找到导致黑暗边框的原因，但没有成功。

以下是 a jsfiddle 和正在运行的代码段显示问题：

  .tooltip {position：relative; z-index： 1; display：inline-block; padding-right：10px;}。tooltip .info {position：absolute; left：100％; top：-7px; display：block; padding：7px; border：1px solid #cccccc; background：#fff; -webkit-border-radius：4px; border-radius：4px; -webkit-box-shadow：1px 1px 8px 0px rgba（0，0，0，.2）; box-shadow：1px 1px 8px 0px rgba（0，0，0，.2）;}。tooltip .info img {float：left;}。tooltip：after {content：''; position：absolute; top：0; left：100％;显示：block; width：0; height：0; margin-left：-13px; border：0 solid transparent; border-right-color：#cccccc; color：#ccc;}。tooltip .info：after {content：''; position：absolute; top：7px; left：-12px; z-index：10;显示：block; width：0; height：0; border：transparent solid 6px; border-right-color：#fff; color：#ccc;}  

 < a class = tooltip>测试工具提示< span class =info>我的齿轮信息< / span>< / a>   
 
 
此第二个演示演示了背景
解决方案
 
 2015年的编辑
 h3> 
 
 
现在使用 RGBa 和 transparent 显然，Bug已经解决了（也许偶然，因为它仍然处于新的，而不是在FIXED）。
 
 
 
如果仍然发生在你​​身上，你可能运行一个旧的FireFox版本（当前是38.0.5），你可以使用解决方案中的解决方法来克服这个问题。
 
 
 
 
 
 
这是
 
 
  错误646053    - 在透明边框附近角连接处的暗对角线
 
 
解决方法是使用  RGBa  而不是透明：
  / * old * / 
 border：transparent solid 6px; 
 border-right-color：#fff; 
 
 / * new * / 
 border：rgba（255,255,255,0）solid 6px; 
 border-right-color：#fff; 
  
 
In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox:



I tried to find what was causing the dark border in Firefox without success.

Here is a jsfiddle and a running snippet demonstrating the problem:



.tooltip {
    position:relative;z-index:1;
    display:inline-block;padding-right:10px;
}
.tooltip .info {
    position:absolute;left:100%;top:-7px;
    display:block;padding:7px;border:1px solid #cccccc;
    background:#fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
    box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
}
.tooltip .info img {float:left;}
.tooltip:after {
    content: '';
    position:absolute;top:0;left:100%;
    display:block;
    width:0;
    height:0;
    margin-left:-13px;
    border:0 solid transparent;
    border-right-color:#cccccc;
    color:#ccc;
}
.tooltip .info:after {
    content: '';
    position:absolute;top:7px;left:-12px;z-index:10;
    display:block;
    width:0;
    height:0;
    border:transparent solid 6px;
    border-right-color:#fff;
    color:#ccc;
}

<a class="tooltip">Test for tooltip<span class="info">My tootip information</span></a>





This second demo demonstrates that background transparent is the root cause as replacing transparent by a color results in the same render in Chrome and Firefox.
解决方案
2015's EDIT

Now it works by using both RGBa and transparent; appearently, the Bug has been resolved (maybe incidentally, because it is still in state NEW , instead that on FIXED).

If it still happens to you, you're probably running an old FireFox version (the current one is 38.0.5), and you can use the workaround in the answer to overcome the problem.



It is the

  
Bug 646053 - dark diagonals at corner joins adjacent to transparent borders 
The workaround is to use RGBa instead of transparent:
/* old */
border: transparent solid 6px;
border-right-color: #fff;

/* new */
border: rgba(255,255,255,0) solid 6px;
border-right-color: #fff;


                        
这篇关于奇怪的黑暗边框：在Firefox中的css箭头后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！