2

オーバーフローを使用すると、Webkitでレンダリングの問題と思われる問題が発生しました。子divで、javascriptを使用して親divの高さを増やします。私は自分の問題を次のサンプルコードに要約しました。

このソースからページを作成し、WebKitブラウザー（Safari、Chrome）でレンダリングします。[展開]ボタンをクリックすると、オーバーフローしたdivが非表示になっていることがわかります。設定され、展開された親divの高さに基づいて表示されるはずです。表示されません。Gecko（Firefox）およびTrident（ID）ブラウザーでは、これは正常に機能します。

回避策についてのアイデアや提案はありますか？基本的に、親div内にテキストを含むdivのテーブルを手動で作成したいのですが、テキストをdivの境界を超えて折り返したり拡張したりしたくありません。ページで起こっている他のことに基づいて、親divの高さを調整できる必要があります。

ありがとう！バート

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />

<style type="text/css">

    #test_container {
        width: 540px;
    }

    .column_allow_overflow {
        float: left;
        width: 100px;
        height: 16px;
        margin-left: 4px;
        padding: 3px;
    }

    .column_no_overflow {
        float: left;
        width: 100px;
        height: 16px;
        margin-left: 4px;
        padding: 3px;
        overflow: hidden;
    }

    .background {
        background-color: #444444;
        color: #e5e5e5;
    }

    .data_row {
        height: 22px;
        width: 100%;
        padding-bottom: 22px;
        background-color: #cccccc;
    }

    #expand_container {
        overflow:scroll;
        overflow-x: hidden;
        -ms-overflow-x: hidden;
        height: 100px;
        width: 100%;
        background-color: #cccccc;
    }



</style>

</head>
<body>

<div id="test_container">
<div class="data_row background">
    <button type="button" id="expand_button" onclick="expand();">Expand</button>
</div>
<div id="expand_container">
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
</div>  
</div>  

<script>

var expand = function (e) {
    var button = document.getElementById('expand_button');
    var expand_container = document.getElementById('expand_container');

    button.onclick = contract;

    expand_container.style.height = '160px';
    button.innerHTML = "Contract";
};

var contract = function (e) {
    var button = document.getElementById('expand_button');
    var expand_container = document.getElementById('expand_container');

    button.onclick = expand;

    expand_container.style.height = '100px';

    button.innerHTML = "Expand";
};                  

</script>

</body>
</html>
4

3 に答える 3

1

編集：これについてもう一度考える時間が少しあったので、元の回答で言っていたことが真実であることに気付きましたが、これは簡単に言えばリフローの問題です。高さを上げます。これはリフローの問題であるため、解決策は非常に簡単で、position: relative: を追加します。

.data_row { 
    position: relative;
    height: 22px; 
    width: 100%; 
    padding-bottom: 22px; 
    background-color: #cccccc; 
}

これで問題なく動作することを確認しました。教育目的で、元の回答を残しておきます。

あなたにとって良い解決策は本当にありませんが、あなたの問題は単なるオーバーフローではなく、隠されていると思います。これは float + overflow: hidden の組み合わせです。フロートを削除し、たとえば要素をページ上に絶対に配置すると、スクリプトは WebKit ブラウザーで正常に動作します。オーバーフローの問題はありません。それがあなたがやりたいことかどうかはわかりませんが。問題は、オーバーフローが実際には、コンテナーが小さすぎる場合にコンテンツを表示するかどうかを制御するだけでなく、フロートと組み合わせて、コンテナー自体のサイズも設定できることです。

これは非常に簡単な例です:

<div style="width: 500px; overflow: hidden;">
  <div style="width: 200px; float: left; height: 100%; background-color: red;"></div>
  <div style="width: 200px; float: right; height: 100%; background-color: orange;"></div>
  <div style="background-color: green; overflow: hidden;">aaa</div>
<div>

奇妙なことに、オーバーフローを設定すると、フロートのクリアとして機能します。要素のフロートをクリアするのではなく、自己クリアします。これは、オーバーフローが適用された要素 (自動または非表示) が、高さが宣言されていないと仮定して、(折りたたまれるのではなく) フロートされた子要素を内部に含めるのに必要な大きさに拡張されることを意味します。

そのため、デザインに問題があると思います。

display: table-cell を使用することをお勧めします。すべてのアイテムの高さが同じである必要がある場合は、テーブル レイアウトを div 純粋主義者でない場合、または絶対配置にすることをお勧めします。

PS申し訳ありませんが、私は本当に良い解決策を提供していないので、おそらく答えではなくコメントである必要がありましたが、コメントには長すぎました.

于 2010-11-21T04:14:12.347 に答える
0

私はそれを修正する少し醜い回避策を見つけることができました （注：一番下にスキップすることもできます....より良い解決策を思いつきました）。expand_container 要素内に、他の要素を含む別の div を追加しました。展開関数と縮小関数では、その要素をその親 (expand_container) から削除し、expand_container のサイズを変更してから、その div を追加し直します。この問題は発生しなくなりました。

<div id="expand_container" >
  <div id="inner_container" style="margin:0; padding:0">  <!-- new element! -->
    <div class="data_row background">
        <div class="column_allow_overflow background">
...

それから...

var expand = function (e) {
    var button = document.getElementById('expand_button');
    var expand_container = document.getElementById('expand_container');

    var inner_container = document.getElementById('inner_container'); // new
    expand_container.removeChild(inner_container); // new
    button.onclick = contract;

    expand_container.style.height = '160px';

    expand_container.appendChild(inner_container); // new
    button.innerHTML = "Contract";
};

等...

編集：

参考までに、その内部要素を追加して dom 構造を変更したくない場合は、代わりに expand_container のすべての子をヤンクし、サイズ変更後にそれらをすべて元に戻すことができます。例えば：

var len = expand_container.childNodes.length, i, a = [];
for (i=len-1; i>=0; i--) 
 a.push(expand_container.removeChild(
      expand_container.childNodes.item(i)));

button.onclick = contract;
expand_container.style.height = '160px';

for (i=len-1; i>=0; i--)
 expand_container.appendChild(a[i]);

無数の要素がある場合は遅くなる可能性がありますが、あなたの例では魅力的に機能します。

編集 2: OK、さらにうまく機能するものを考えてみました.... expand_container を削除して、同じ場所に追加し直します。繰り返しますが、正常に動作します (nextSibling が null の場合でも):

var next = expand_container.nextSibling;
var parent = expand_container.parentNode;
parent.removeChild(expand_container);

button.onclick = contract;
expand_container.style.height = '160px';

parent.insertBefore (expand_container, next);
于 2010-11-21T04:31:37.360 に答える
0

この夜にコードをコピーして貼り付けてテストするにはクラッシュしそうです (まあ、私がいるのは夜です) が、問題は、特定の包含要素の子孫要素がリフローしないことであると仮定します関連するスタイルを正しく変更する場合は、以下も追加してみてください。

expand_container.className = expand_container.className;

スタイルチェンジ直後。何もすべきではないように見えますが、私がテストしたすべてのブラウザーで、ブラウザーがコンテナーとそのすべてのコンテンツをリフローさせ、問題を修正する必要があります。

既知のバグでない場合は、 http://bugs.webkit.org/でバグとして報告することもできます。

于 2010-11-21T05:35:53.317 に答える