如何在IE6 - IE8上正确显示此搜索表单？

Question

我正在开发应用程序，部分项目要求是整个站点与IE6兼容 - IE8。到目前为止，除了我创建的搜索表单外，其他网站在旧版浏览器上看起来都不错。

这就是现代浏览器的样子，它应该是一般的样子：，

...但这就是它在IE6上的样子：。

是否有人在尝试使无表格布局在旧版浏览器上运行时遇到过一些经验，或者在过去遇到类似问题？基本上我有容器拿着每个标签/输入，并且需要它们以每行三个相邻的方式显示，标签和输入在第一张图像上看到彼此相邻。

以下是有关这些元素的代码。

编辑：我在html和css上添加了更多内容，以便在您自己的计算机上轻松部署。

感谢您提供的任何帮助！

HTML

<div class="mid">
<h2>Search and filter by:</h2>
<!-- 1st Row Starts -->
<form action="" method="post" id="main-search-form"> <!-- containing form for search -->
<div id="search-container" align="center">
<div class="search" align="center">
      <form>
        <label>Keywords</label>
        <input type="text" name="keywords" value="" id="keywords" placeholder="enter search terms here...">
     </form>
</div>
<div class="search" align="center">    
    <label>Category</label>
    <select>
        <option value="" disabled selected>Select Category</option>
        <option value="">Category 1</option>
        <option value="">Category 2</option>
        <option value="">Category 3</option>
        <option value="">Category 4</option>
        <option value="">Category 5</option>
    </select>
</div>
<div class="search" align="center">
    <label>Service</label>
    <select>
        <option value="" disabled selected>Select Service</option>
        <option value="food">Food and Nutrition Support</option>
        <option value="shelter">Shelter and Care</option>
        <option value="protection">Protection</option>
        <option value="healthcare">Healthcare</option>
        <option value="pyschosocial">Psychosocial Support Services</option>
        <option value="education">Formal and informal education</option>
        <option value="legal">Legal Services</option>
        <option value="other">Other Services</option>
    </select>
</div>       
</div> <!-- //.search-container -->
<!-- // 1st Row  -->

<!-- 2nd Row Starts -->
<div id="search-container" align="center">
<div class="search" align="center">
    <label>Age</label>
    <select>
        <option value="" disabled selected>Select Age</option>
        <option value="">Age 1-3</option>
        <option value="">Age 4-10</option>
        <option value="">Age 11-14</option>
        <option value="">Age 15-18</option>
    </select>
</div> 
<div class="search" align="center">
    <label>Gender</label>
    <select>
        <option value="" disabled selected>Select Gender</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</div>
<div class="search" align="center">
    <label>Region</label>
    <select>
        <option value="" disabled selected>Select Region</option>
        <option value="">Category 1</option>
        <option value="">Category 2</option>
        <option value="">Category 3</option>
        <option value="">Category 4</option>
        <option value="">Category 5</option>
    </select>
</div>
</div><!-- //.search-container -->
<!-- // 2nd Row  -->

<!-- 3rd Row Starts Here -->
<div class="search-container" align="center">
<div class="search" align="center">
    <form class="checkbox">
        <label>Day</label>
        <input type="checkbox" name="monday" value="Monday">M
        <input type="checkbox" name="tuesday" value="Tuesday">T
        <input type="checkbox" name="wednesday" value="Wednesday">W
        <input type="checkbox" name="thursday" value="Thursday">R
        <input type="checkbox" name="friday" value="Friday">F
        <input type="checkbox" name="saturday" value="Saturday" >Sa
        <input type="checkbox" name="sunday" value="Tuesday">Su
    </form>
</div>
</div>
</form>
</div>

CSS

.mid {background: #258db1; color: #fff; padding: 20px 0 30px 0;}
.mid h2 {color: #fff; text-align: center;}
.mid h2, .mid h3, .mid p, .footnote p {color:#fff;}

/* SEARCH */
#main-search-form {width: 100%;}
.search {min-width: 250px; display: inline; margin:0; position:relative;}
.search select {background: #fff; height: 40px; width: 150px; margin-bottom: 30px; margin-right: 30px; position:relative; display: inline;}
.search option, {padding: 10px; position:relative; display: inline;}
.search, .search label {display: inline;}
.search input#keywords {display: inline; position: relative; min-width: 250px; background: #fff; margin-right: 20px;}
.search .checkbox input {display: inline; position: relative; width: 15px!important; height: 15px!important; margin-left: 10px!important; margin-right: 2px!important;}
.search .checkbox label {display: inline; position: relative; margin-right: 10px;}

@media (max-width: 959px) {
    .search {disply: block; clear:both;}
    .search input, .search select, .search input#keywords {display:block; margin-bottom: 20px; margin-top: 8px; width: 60%!important; margin-left:30px;}
    .search, .search label, .search input#keywords {display: block; clear:both;}
}

Answer 1

删除#search

中的align ='center'属性