4

次の HTML マークアップがあります (簡略化)

<div class="controlDiv" style="white-space: nowrap">
  <div class="pre"></div><input style="width: 100%"><div class="post"></div>
  <div class="validationMsg" style="white-space: normal">some message</div>
</div>

内側の Div (validationMsg) は動的に表示されます。FF ではテキスト メッセージが正しくラップされ、上記の入力フィールドよりも長くはありません。

ただし、IE8 では空白のプロパティは無視され、テキストは自動的に折り返されません。IE 開発者ツールでいくつかの実験を行いました。ラッピングが正しく適用されたときに、空白のプロパティを無効にしました (ただし、ラッピングを無効にする必要がある記号の前後の入力フィールドの書式設定に失敗しました)。

コードは少し混乱しているように見えますが、使用されているフレームワークは非常に厳密であるため、新しい div または段落のみを controlDiv に追加できました。

4

1 に答える 1

1

これは最善の解決策ではないかもしれませんが、IE が動作するのは、親からの nowrap が validationMsg のレイアウトに適用されるため、「空白: 通常」を単独で設定することはできません。私の解決策は、「幅: 100% (または validationMsg div に適用する任意のサイズ); 空白: 通常」というスタイルの validationMsg のラッパーを用意することです。そのため、レイアウトは IE だけでなく他のブラウザーでも見栄えがします。

私が投稿した例を次に示します: http://jsbin.com/edeqam/1

すべてのブラウザで一貫して表示されます。

于 2013-02-13T21:21:09.753 に答える