1

Chromeのいくつかの新しいバージョン（バージョン20について）では、CSSをレンダリングする新しいバグが導入されたようです。

これが何であるかです： 正しいレンダリング

そして、新しいChromeがそれをどのように表示するか： 正しくないレンダリング

コード（jquery-ui）は次のとおりです。

<a href="#" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowreturnthick-1-w left" style="
"></span>Up</a>

Firefoxおよび以前のバージョンのChromeは、コードを正しくレンダリングします。

このバグを修正できないことは承知していますが、回避する方法はありますか？

前もって感謝します

4

3 に答える 3

3

IE9 をチェックインしましたが、期待どおりのラッピングはありません。

いくつかの掘り下げから、これは Chrome 21 のバグだと思います。これは修正されたようですが、Chrome 24 でも同様の問題が発生しています。

browsershots.orgでサイトを確認したところ、Chrome 20.0.1132.57 Chrome 20.0.1132.57 http://api.browsershots.org/png/original/fa/fac627c3240bca39ef441ef4a5379a41.pngと Chrome 21.0.1180.89 Chrome 21.0の間で破損しているようです。.1180.89 http://api.browsershots.org/png/original/25/256df60f8f44dfa2fda3b7270094aa96.png

Chrome 21 にはかなりの数の(フォント) レンダリングの問題があるようです。たとえば、リリース ブログの投稿で、関連する WebKit バグFloat imprecision が見つかりました。サブピクセル レイアウトを使用した LineLayout で正しくラッピングされていないことがわかりましたが、これはChrome 22 で修正されたようです。不正なラッピングを報告するバグはまだ報告されており、その最後のバグのjsFiddle の例の場合、IE9 ではなく Chrome 24 でまだ壊れています。

WebKit のバグで 1 つの部分が際立っていました。

事実上、値がほぼ 1 ずれる可能性があることを意味します。

私はこれを「幅がほぼ 1 ピクセルずれている可能性がある」と解釈しましたが、実際にUpアンカー タグの幅を計算さwidth:31pxれたものからハードコーディングされたものに変更width:32pxすると、そのメニュー項目の問題が修正されます。ただし、これは一般的な修正ではないため、バグの原因となっている要素、つまりfloatプロパティを削除することをお勧めします。

.leftクラスを次から次へ変更{ float:left }:

.left {
    display: inline-block;
    vertical-align: top;
}

問題を修正するようです。ただし、これは IE 6 または 7 の訪問者に対して「そのまま」機能しません ( http://caniuse.com/#search=inline-blockを参照)。これらの古いブラウザーでサイトを同じように動作させる必要がある場合、これを回避する方法があります - How to fix display:inline-block on IE6?

最後に、このアプローチが受け入れられる場合は、CSS.leftルールの名前を、たとえばプロパティが適用される場所をより代表するものに変更します.nav-icon:-)

于 2012-10-16T14:28:51.170 に答える
1

タグに追加white-space: nowrapします。<a>

于 2012-10-16T11:39:08.053 に答える
0

<a>と交換するのがコツだと思います<div>が、レンダリングはjquery-uiで行うので難しいかもしれません。方法を探して、ここに投稿します。

于 2012-10-16T11:55:43.437 に答える