css - 2 列ではなく 1 列に配置された IE7 フォーム

Question

OK、追加方法がわかりません。このフォーム: http://xquives.kiaistudio.com/new-form/index.phpには 2 列のフィールドがあります。しかし、IE7では1つの列にありますが、クロムのie8、9、またはFFにはありません。私が行った悪いこと、または IE を通常のブラウザのように動作させる方法を教えてください。私は 2 時間以上のテストを行いました...そしてどこを見ればいいのかわかりません!

Answer 1

あなたのマークアップは、くだらない ie7 には向いていません。マークアップは一般的に次のようになります。

<ul>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
</ul>

これはかなりエラーが発生しやすいです。

次のように列を駆動する親コンテナーを使用したほうがよいでしょう。

<div style="width: 50%; float: left">
    <ul>
    <li class="left-column-lis">stuff</li>
    <li class="left-column-lis">stuff</li>
    <li class="left-column-lis">stuff</li>    
    <li class="left-column-lis">stuff</li>
    </ul>
</div>
<div style="width: 50%; float: left">
    <ul>
    <li class="right-column-lis">stuff</li>
    <li class="right-column-lis">stuff</li>
    <li class="right-column-lis">stuff</li>    
    <li class="right-column-lis">stuff</li>
    </ul>
</div>

編集: このマークアップ構造に結婚している場合は、次を追加して ie7 をハックできます。

UL{*overflow:visible;}
.autocolumn LI {*width: 48%;}

上で説明したような方法で列をレイアウトすることをお勧めします