8

ツールチップ用に純粋なCSSで矢印を作成しようとして、Firefoxで問題が発生しました。

ここに画像の説明を入力してください

Firefoxで暗い境界線を引き起こしている原因を見つけようとしましたが成功しませんでした。

これは、問題を示す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%;
    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>

この2番目のデモは、背景を透明にすることが根本的な原因であることを示しています。透明を色に置き換えると、ChromeとFirefoxで同じレンダリングが行われるためです。

4

1 に答える 1

15

2015年の編集

との両方を使用して機能するようにRGBaなりましたtransparent。どうやら、バグは解決されているようです (おそらく、FIXED ではなく、まだ NEW の状態であるため、偶然かもしれません)。

それでも問題が解決しない場合は、古い FireFox バージョン (現在のバージョンは 38.0.5) を実行している可能性があり、回答の回避策を使用して問題を解決できます。

それは

バグ 646053 - 透明な境界線に隣接するコーナー結合部の暗い対角線

RGBa回避策は、代わりに使用することですtransparent：

/* old */
border: transparent solid 6px;
border-right-color: #fff;

/* new */
border: rgba(255,255,255,0) solid 6px;
border-right-color: #fff;
于 2012-10-18T14:17:23.207 に答える