html - 如何使此搜索表单在 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' 属性