1

重要な注意点！ このバグは、Safari 4.0 (528.16) を実行している第 1 世代の iPhone でのみ再現しましたが、サイトをできるだけ広く互換性を持たせようとしているので、これはまだ潜在的な問題です...

問題: リスト内の浮動要素が画面に表示されません。問題を次のルールの組み合わせに絞り込みました。

<html>
<head>
    <style>
        p {
            float: left;
            overflow: hidden;
        }

        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li><p>hello</p></li>
    </ul>
</body>

<li>に続くタグ内に非フローティング要素を配置する<p>と、 のテキスト<p>が表示されます。

これまでのところ、Windows 7 の Chrome/IE/Firefox、iPhone 4 の Safari、Android の Chrome/Firefox/Opera (4.2.1) の最新バージョンでこれをテストしましたが、説明した問題がnot発生しました。

繰り返しますが、これは Safari 4.0でしか発生していませんが、すべてのプラットフォームとブラウザー バージョンの組み合わせをテストすることはできないため、この問題がより広範囲に及ぶのではないかと懸念しています。

ありがとう

4

3 に答える 3

1

私もこの問題に遭遇していますが、Windows 7 の Safari 5.1.7 で発生しています。

残念ながら、現在のホットフィックスは JavaScript ベースです。

    $('.listContainer').hide();
    $('.somethingElse').hide();
    $('.listContainer').show();

なぜこれが機能するのか正確にはわかりませんが、 .somethingElse が有効なセレクターである限り、非表示/表示操作は最適化されず、実際に Safari にリストのレンダリングを強制します。これの基本を実際に理解している人は、おそらくもっと優雅な解決策を提供できるでしょうが、それが私が現在使用しているハックです。

編集

奇妙なことに、動的に生成された HTML を作業中の .html ファイルに静的に配置すると、Safari でレンダリングの問題が発生しません。これを壊している DOM が Safari でどのように構築されるかについて、ここで何か低レベルのことが起こっています。新しい要素を DOM にリアルタイムで追加する方法について、いくつかの標準に従っていない可能性も十分にあります。

何か助けはありますか？多分私は私自身の質問を追加する必要があります。

最終編集

よし、これで CSS を使用できるようになりました。

解決策は、リスト項目にoverflow:hiddenを与えることです。

理由はわかりませんが、それで問題は解決しました。それがあなたの問題を解決することを願っています。試してみます。

于 2013-03-06T20:23:41.677 に答える
0

float 要素がたくさんある場合、親要素はその高さを正しく計算できません。

次のように、すべてのフロート要素に空の要素が含まれた後

<div class="break"></div>

. break{ height: 1px; width: 100%; clear: both; float: none; }

于 2013-03-06T20:25:59.387 に答える
0

overflow:hiddenここでの問題は、要素が範囲外に移動する理由があるということだと思います。実際、幅が指定された要素があり、overflow: hidden内部タグを非表示にしようとしている場合

例：

<div style='width:200px'>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
</div>

次に、実際には、指定された 200px 幅を超えるものをすべて非表示にしようとしています。内部 div をフロートにして、それらすべてが同じ行/セクションまたは div にある場合

于 2013-02-02T17:59:52.790 に答える