5

問題を説明するフィドル-ボタンを数回クリックすると、ボックスが縮小して問題が明らかになります。

この問題は、InternetExplorerでのみ発生するようです。

基本的に、を含む要素のwhite-space: pre-wrapサイズがゆっくりと変更されると、IEはワードラップを再計算しないため、テキストが要素の外にプッシュされます。一部の再計算は行われますが、すべてではありません。要素のサイズが変更されるほど、実際にはより多くの再計算が行われるようです。

ページをズームすると問題は解決しますが、実際的な解決策ではないことは明らかです。

コンテナのサイズが変更されたときに、IEにワードラップを再計算させるにはどうすればよいですか？

4

2 に答える 2

4

新しい（ばかげた）HTML変更ソリューション（しかし機能します！）

奇妙な最初の行の障害のため、解決策は重要でない最初の行を生成し、それを受け入れることに依存していました。このフィドルは、IE9の現在の「バグのない」ソリューションのように見えるものを示しています（以前のIEバージョンでは、疑似要素/クラスの使用を考慮して微調整する必要があります）。

HTMLでは、テキストの各セクションが「二重に折り返される」ように、過度の折り返しが必要です。デモには、ブロックレベルのラップを取得するための3つの異なる手段がありますが、すべて同じ修正を使用します。

エッセンシャルHTML

<div id="cnt">
  <p class="ieFixBlockWrap">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt consectetur tortor, sed vestibulum lectus hendrerit at. Praesent fermentum augue molestie lectus pharetra eget cursus erat cursus.
    </span>
  </p>
  <span class="ieFixBlockWrap">
    <span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fringilla nisl posuere tortor rutrum lobortis.
    </span>
  </span>
  <div class="ieFixBlockWrap">
    <span>In risus libero, faucibus ac congue et, imperdiet ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lobortis ullamcorper. Proin risus sapien, pulvinar in adipiscing non, rutrum hendrerit magna. Praesent interdum pharetra vehicula. Integer molestie mi neque.
    </span>
  </div>
</div>

CSS

#cnt {
    white-space: pre-wrap; 
    border:1px solid black;
    line-height: 1.2em; /* set explicitly, see below */
    /* prevent shifted :before from interfering with elements preceeding #cnt */
    overflow: hidden; 
}

.ieFixBlockWrap:before { /* this becomes the first line, but also an extra line gap */
    content:''; 
    display: inline-block;
    width: 100%;
}

.ieFixBlockWrap { 
    display: block; /* just to demo span as block level */
    margin: -1.2em 0; /* offset by line-height to remove gaps from :before*/
}

.ieFixBlockWrap:last-child {
    margin-bottom: 0; /* last one does not need the bottom margin adjusted */
}

元のHTML変更ソリューション（まだ最初の行で失敗しました）

セットspan内のすべてのテキストを1つにまとめると、このフィドルで動作するように見えました。divpre-wrap

于 2012-07-27T20:00:06.447 に答える
0

要素を削除してから再度追加することで、IEにコンテナを強制的に再描画できるようです（残念ながら、これに頼る必要がありますが、まあまあ）。これは、それを実行するサイズ変更関数と、実際に動作することを確認するためのフィドルです。

var resize = function(element, changeWidth, changeHeight){
    changeWidth = parseInt(changeWidth) || 0;
    changeHeight = parseInt(changeHeight) || 0;

    element.style.width = (parseInt(element.style.width) + changeWidth) + 'px';
    element.style.height = (parseInt(element.style.height) + changeHeight) + 'px';
    var parent = element.parentNode;
    parent.removeChild(element);
    parent.appendChild(element);
};
于 2012-07-27T19:11:09.007 に答える