css - IE7 表单放在单列而不是双列

Question

好的，我不知道它是如何追加的，这个形式:http://xquives.kiaistudio.com/new-form/index.php有一个两列字段。但在 IE7 中它在一列中，但在 ie8 或 9 或 Chrome 的 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%;}

最好的做法是按照我上面描述的方式布置您的列