1

input:checked+label実際のチェックボックス入力要素を非表示にし、 CSS セレクターでラベルのスタイルを変更することにより、カスタム チェックボックスを含むページを作成しようとしています。これは問題なく動作しますが、IE7 では非表示のチェックボックスがドキュメント フローのスペースを占有し、レイアウトが乱れます。

これは、問題の非常に単純化されたデモンストレーションです。

<style type="text/css">
div.hello { position: absolute; left: 200px; }
</style>

<ul>
    <li><div class="hello">Hello</div><div>First</div></li>
    <li><div class="hello">Hello</div><div>Second</div></li>
    <li><div class="hello">Hello</div><div>Third</div></li>
</ul>

ドキュメント フローから取り出されたブロック要素は、position:absoluteIE7 では依然として垂直方向のスペースを占有しているようです。

新しいブラウザでは次のように表示されます。

First         Hello
Second        Hello
Third         Hello

IE7 では次のようになります。

              Hello
First
              Hello
Second
              Hello
Third

実際のシナリオに近い例については、この fiddleを参照してください。何か不足していますか？チェックボックス要素を非表示にして、引き続き機能し、レイアウト内のスペースを占有しないようにするにはどうすればよいでしょうか?

4

6 に答える 6

1

この css を使用して入力のスタイルを設定し、入力を非表示にすることができます。（@ Abody97が言ったように）

input { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    opacity: 0; 
    width: 0px; 
    height: 0px; 
}

ただし、入力によって作成されたスペースを削除するために。入力タグ間のスペースを削除します。好き<input /><input />じゃない<input /> <input />

于 2012-08-14T13:57:35.410 に答える
0

私はそれを修正するために次のCSSルールを追加しました：

label
{
    display: block;
    *zoom: 1;
}

これにより、IE7でhasLayoutの動作が有効になり、正しくレンダリングされます。*ルールの前に、これがIE7にのみ適用されることを確認します。有効なCSS2.1ソリューションが必要な場合は、返信してください。別の方法で修正を試みます。

于 2012-08-14T13:36:31.137 に答える
0

inputこの一連のスタイルでスタイリングしてみてください:

input {
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 0;
    width: 0px;
    height: 0px;
}

IEでも動くようです。それが役に立ったことを願っています！

于 2012-08-14T12:09:45.997 に答える
0

私はIE7を持っていないので、テストできません

しかし、私はdisplay:noneそこに置きます

input { display:none }
于 2012-08-14T12:23:47.737 に答える
0

rule を削除するだけlabel { display: block; }で、これは機能するように見えました。JSFiddle。

于 2012-08-14T12:51:03.873 に答える
0

:checkedは CSS3 セレクターであり、IE7 では機能しません。

display:none絶対配置で移動する代わりに、チェックボックスを非表示にしないのはなぜですか?

で非表示にすることもできますvisibility: hidden;

于 2012-08-14T12:35:16.963 に答える