1

IE で面白い問題が発生しています。コードの一部が次のような大きなページがあります。

<html>
<head>
</head>
<body>
<table width="100%" border="0" cellSpacing="0" cellPadding="0">
<tr>
<TD style="PADDING-RIGHT: 2px" >Label:
</TD>
<TD  >
    <LABEL style="WHITE-SPACE: nowrap">
    <INPUT  type="radio" name="inputs" /> 
    input 1 
    </LABEL>

    <LABEL style="WHITE-SPACE: nowrap">
    <INPUT type="radio" name="inputs" /> 
    input 2 blah bblah </LABEL>
</TD>
</tr>
</table>
</body>
</html>

次に、ページの幅を変更するときに、ラジオ ボタンとラベルを 2 行目に分割します。これはすべてのブラウザーで正常に動作し、IE では例として使用しているコードを使用します。ページ内の他のものを除いて同じであり、私の例ではテーブルの周りに別のテーブルがあります。でも、壊れません。2 つのラジオボタン + ラベルは常に同じ行に配置されます。しかし、&nbsp;最初のラベルの終わりと2番目のラベルの始まりの間に入れると、壊れて2行目の先頭にスペースが追加されます。ページ全体をコピーしたくはありませんが、これを解決する方法について誰かが素晴らしいアイデアを持っているかどうか疑問に思っていました..

読んでくれてありがとう！

style="WHITE-SPACE: nowrap"更新:最初のラベルから を削除すると、2 番目のラジオ ボタン + ラベルが次の行に分割されることに気付きました。しかし、「input 1」のテキストが大きすぎると、おそらく壊れるでしょう (そして、それを避けたいのです)。そのため、それを防ぐ方法がよくわかりません。

4

1 に答える 1

0

LABEL要素はデフォルトでインラインです。LABEL {display: block; }CSS にルールを追加します。または、必要に応じてペア間で改行する機能を持ちながら、個別/ペア内で改行を防ぎたい場合は、display: inline-block代わりに使用します。IE 6/7 (必要な場合) では、同様の効果を で実現できます。display: blockinputlabeldisplay: inline; zoom: 1;

ところで、あなたのコードは非常に古いものであり、よりセマンティック/構造的なマークアップに変換することでメリットが得られます。例えば：

<dl>
    <dt><label for="example">Example label</label></dt>
    <dd><input type="text" name="example" id="example" /></dd>

    <dt><label for="foobar">Foobar</label></dt>
    <dd><input type="text" name="foobar" id="foobar" /></dd>
</dl>
于 2013-01-11T22:40:43.973 に答える