4

CSSの三角形を作成しています。コードは次のとおりです。

display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 9px 9px;
border-color: transparent transparent rgb(255, 255, 255);
position: absolute;
top: 14px;
left: 133px;

問題は、この三角形がWindows7の使用中にFirefox16.0.2で境界線をレンダリングしていることです。

FFの三角形のスクリーンショット-上と下の2つの三角形があり、同じ影を作成します FFの三角形のスクリーンショット-上と下の2つの三角形があり、同じ影を作成します

MACのFFをチェックインしましたが、三角形の境界線が表示されません。

三角形は、Chrome、Safari、IE、Opera、MAC、およびWindowsで正しく表示されます

なぜこれが起こっているのか考えていますか？

編集：

ここで確認できます：https ：//metrikstudios.com/want/fbapp/triangle-display.phpページには、上記のコードが大きな三角形で表示されます

4

2 に答える 2

2

代わりに、次のようにrgbaカラーを使用してみてください。

ボーダーカラー：rgba（255、255、255、0）rgba（255、255、255、0）rgb（255、255、255）;

デフォルトの境界線の色は黒なので、これらの境界線は奇妙なトランジションアーティファクトである可能性があります。目に見えない黒から白一色に移動する代わりに、目に見えない白から白一色に移動します。

于 2012-11-19T15:52:22.303 に答える
0

私の例では、2つの三角形の間の細い線を意味しますか？

.one {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent transparent rgb(0, 0, 0);
    position: absolute;
}
.two {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent rgb(0, 0, 0) transparent;
    position: absolute;
}


<div class="one"></div>
<div class="two"></div>

テストしたWin7のすべてのブラウザーにこの行が表示されます。私はそれがこのようにレンダリングされていると思います、そしてあなたはこれを取り除くことはありません。フィドル

于 2012-11-19T15:30:16.740 に答える