2

:before および :after 疑似クラスを使用して、2 つの三角形をオーバーレイすることにより、境界線の三角形の手法を使用して単純な吹き出しを作成しようとしています。

ここにJSFIDDLEがあります

.bubble:before, .bubble:after {
    border-style: solid;    
    content:"";
    display: block;
    position: absolute;
    width: 0;
}
.bubble:before {
    border-color: #DCDCDC transparent;
    border-width: 33px 0 0 33px;
    bottom: -33px;
    left: 40px;
}
.bubble:after {
    border-color: #FFFFFF transparent;
    border-width: 35px 0 0 35px;
    bottom: -30px;
    left: 37px;
}

問題は .bubble:after 三角形です。何らかの理由で、Windows 8 上の Firefox は、私が定義していない追加の境界線をレンダリングします。

ここに画像の説明を入力

Chrome でうまく動作し、Internet Explorer 10、9、および 8 でも完全に表示されます。

何か案は？

4

2 に答える 2

2

すぐに、試してみるべき 2 つの簡単な提案を考えています。私は Windows 8 を実行していないので、これらを自分で試すことはできませんが、深く関わる前にこれらを試してみませんか。

最初の 1 つは、プレフィックスを追加し-moz、ボーダー スタイルの一部を複製することです。

.bubble:after {
border-color: #FFFFFF transparent;
border-width: 35px 0 0 35px;
-moz-border-width: 35px 0 0 35px;
bottom: -30px;
left: 37px;
}

早速試してみたいものばかりです。

それが機能しない場合は、クラス (および疑似クラス)に追加border-style: outset;してみてください。また、三角形の互換性を少し高めるために、値を投入します。.bubble:before:afterz-index

これがjsfiddleです： http://jsfiddle.net/JJ3uk/2/

また、CSS 三角形を作成する際の作業を楽にしたい場合は、この優れた CSS 三角形ジェネレーターを偶然見つけました。興味があれば、IE6 までさかのぼる下位互換性のためのオプションも含まれています。それは最高のもののようです：

CSS三角形ジェネレーター

これで問題が解決するか、または別の方法で解決するかをお知らせください。

編集

border-style: outsetFF17 では境界線の色が変更される可能性があるため、透明を使用するだけでなく、三角形の境界線の RGB 値を手動で設定する必要がある場合もあります。

border-color: rgba( RED-VALUE, GREEN_VALUE , BLUE-VALUE, 0) rgba(RED-VALUE, GREEN-VALUE,  BLUE-VALUE, 0) rgba(RED-VALUE, GREEN-VALUE, BLUE-VALUE, 0) #ffffff;
于 2013-07-04T18:09:36.797 に答える