0

いくつかのフォーム コンテンツが IE8 と IE9 で完全に消えた理由を理解しようとしました。調査の結果、fieldset を display:table-column に設定したことが原因のようです。fieldset を display:table または display:block に設定すると、すべて正常に表示されます。

この html を IE8 および IE9 仮想マシンでテストすると、「フィールドセット内にありません」という見出ししか表示されません。フィールドセットのスタイリングを削除すると、両方が表示されます。

なぜこれが起こるのか誰か知っていますか？

<html>
<head>

<style type="text/css">
fieldset
{
display: table-column; 
vertical-align: top
}
</style>
</head>

<body>
<form>
    <fieldset>
    <div class="row">
        <h6>Inside a fieldset</h6>
    </div>
    </fieldset>
<form>

<h6>Not inside a fieldset</h6>
</body>
</html>
4

2 に答える 2

1

display: table-columnつまり<col>、HTML のタグのように機能します。<col>タグは、スタイルなどの列のプロパティを指定するために使用される非表示の要素です。(これは です) と同じではありませ<td>んdisplay: table-cell。

table-cell代わりに使用する必要があります。

W3C 仕様

ソース - この SO スレッドでの Random832 の回答

編集: table-column IE 7、FireFox 24、Chrome、および Opera 15 では引き続き表示されます。IE 8、9、および 10 では機能しません。

于 2013-10-20T16:40:46.497 に答える
0

デフォルトでは、すべての要素が垂直に上に配置されます。余分なコードを書く必要はありません。以下のコードで十分だと思います：

<html>
<head>

<style type="text/css">
fieldset
{
height: 50px;  /*************** Not Required, Just to show what I mean by my sentence     mentioned above :) ****************/
}
h6,div {
margin: 0; padding:0;
}

</style>
</head>

<body>
<form>
<fieldset>
<div class="row">
    <h6>Inside a fieldset</h6>
</div>
</fieldset>
<form>

<h6>Not inside a fieldset</h6>
</body>
</html>
于 2013-10-20T17:02:07.487 に答える