在ie6和ie7中的浮動div問題

Question

我試圖創建一個搜索表單，這是它的html代碼：

<div id="search_form">

<div class="form-content">

    <form action="http://localhost/mozaic_site/news/search" method="post" accept-charset="utf-8">                            <div class="text-form">

            <input type="text" name="search_text" value="" autocomplete="off" maxlength="100" size="50" class="search_text" />                            </div>

        <div class="button_from">

            <input type="submit" name="search" value="بحث في الموقع" class="search_button" />                            </div>

    </form>                        
</div>

這是CSS代碼：

#search_form {
float:right;
border: 1px solid #C1CAD2;
position: relative;
z-index: 3;
margin-top:1em;

}
.form-content {
padding: 0.2em 0.2em 0.22em 0.22em;
background: url('../images/images_collection_3.png') repeat-x scroll 0 0 transparent;
border: 1px solid #fff;
height: 2.1em;
position: relative;
}

.button_from {
float:right;
background-color: #FCC530;
border: 1px solid #BD9E43;
margin-right: 0.3em;
overflow: hidden;
padding: 0;
}

.search_button {
background: url('../images/images_collection_1.png') repeat-x right -1672px;
border: 0 none;
cursor: pointer;
font-weight: bold;
height: 1.8em;
overflow: visible;
font-size: 108%;
}

.text-form {
float:right;
}
.search_text {
height: auto;
width: 30em;
border-color: #7B7B7B #7B7B7B #CBCCCE #CBCCCE;
border-style: solid;
border-width: 1px;
height: 1.5em;
padding: 0.3em 0.2em 0.33em 0.25em;
}

現在我的問題是在ie6和ie7中

ie6使#search_form div寬度為100％，ie7使表單內容超出#search_form div

我試圖發現問題，但沒有成功

如何解決這個問題呢 ？

Answer 1

如果您提供給我們的HTML示例位於頁面中間，則可能是因為缺少</div> 。 您可能還沒有復制它，所以也許沒有。

盡管更有可能是#search_form div浮動，因此超出了文檔的常規流程，但.form-content和其他文檔卻沒有。 也許這會混淆IE？

嘗試浮動.form-content div。

Answer 2

我知道的最簡單的方法是將這行代碼添加到您的head （假設所有其他HTML都是正確的，並且這僅是CSS問題）

<!--[if IE 7]><link rel="stylesheet" href="YourStyle.css" type="text/css" media="screen, projection"/><![endif]-->

然后在YourStyle.css編輯css，使其僅適用於IE7。 這不會影響其他CSS，因為除非使用IE 7，否則它將不會被讀取。

我95％確信它也適用於IE 6 [if IE 6]