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]

ie6和ie7中浮动div的问题

2 个答案: