Firefox 17とCSSボーダーベースの三角形が正しくレンダリングされない

多くのフロントエンド開発者と同様に、私は境界トリックを使用してCSSで三角形をレンダリングしてきました。 http://apps.eky.hk/css-triangle-generator/このジェネレーターはこの技術に役立ちます。Firefox 17とCSSボーダーベースの三角形が正しくレンダリングされない

今日、Firefoxチームは、レンダリングエンジン上で明確な変更履歴がなくても新しいバージョンをリリースしました。

ここで、これらの三角形の周りに灰色の灰色の境界線が見えます。私はまだそれを取り除くためのトリックを発見していない。編集：「チェスのような透明な」背景を「緑色」のようなものにすると、より簡単に見ることができます

Firefox 17の前に、これらの三角形がどのようにエイリアスされているか、トリックは、ボーダスタイルのプロパティをソリッドの代わりに "破線"に設定することでした。

トライアングルジェネレータでファイヤーバグを使用すると、すぐにどのように表示されるかをすぐに確認できます。

誰にもこの問題の修正がありますか？

編集：境界線のスタイルを使用して：

があなたの三角形のRGB値を取得し、使用：示唆されているようにはめ込まがここに私のFF17

2012-11-29 Adeher

FF17では三角形がうまく見えます。 – j08691

ジェネレータが示唆しているように、 'Try border-style：Firefoxが奇妙なグレーのボーダーをレンダリングする場合はどうなるのですか？ ff17でうまく見えますので – fvu

私はこの点を忘れてしまいました。firefox17の色を明るくします – Adeher

、[OK]を明るい色をレンダリングするには、私がこれまで持っている最高のソリューションです。これは、あなたの三角形の反対側の罫線の "透明"ではなく、不透明度rgbaとして0を指定します。回答に言ったように

border-color: transparent transparent transparent #ffffff; 
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;

：にボーダースタイルを設定し、このようなもので終わるIE8

のためのフォールバックとして働くベースの「透明」古い構文を維持

提案されているように "inset"はFF17の色を変えます。

誰かが簡単な解決策を見つけたり、この投稿が他の人に役立つことを願っています。

2012-11-30 08:19:15 Adeher

このAdeherの修正と他の点線の修正の組み合わせは、FF23で問題を完全に解決するようです。長い形式で

：AdeherのRGBA（）点線の境界線の修正（だけ透明の境界線上）で修正を組み合わせる

border-top: 10px solid #FF0000; 
border-left: 30px dotted rgba(255, 0, 0, 0); 
border-right: 30px dotted rgba(255, 0, 0, 0);

は醜いぼやけ国境のない完璧な三角形をレンダリングするようです。

2013-09-13 20:14:29

答えて