输入按钮随机浮动

Question

我遇到这个问题，IE7上的输入按钮用于搜索产品（因为你可以从图像中猜出）由于某些原因在IE7中这个按钮被抛入随机位置而不是坚持设置它应该的位置。这只发生在IE7，而不是任何浏览器，所以我很好奇，如果有人知道为什么会这样做？ （此外，IE7支持不是我的选择，必须完成。）

  

我的Css：

dl#Navigation input.Button {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #3B9BD9;
color: #000000;
}
dl#Navigation input.Smallest {
cursor: pointer;
width: auto;
}

HTML：

    <dt>Search Products<br />
    <web:SearchTextBox runat="server" id="SearchKeyword" class="Text" />
    <web:SearchSubmit ID="SearchSubmit1" runat="server" SearchBoxes="SearchKeyword" Text="Go" URL="~/catalogue/results.aspx" Class="Smallest Button" />
    </dt>

Answer 1

我建议做的一件事是检查父容器（这里某处是dt）是否有适当的宽度来容纳两个元素，然后设置width属性到input元素。

然而，还有一些其他方法可以定位元素并获得相同的结果。例如，使用floats会产生相同的效果。在两个元素（float: left和input）上使用button。但要做到这一点，你需要了解浮子的特性以及如何处理浮子。

P.S。关于您的示例css代码的另一条建议是审核您的选择器。尝试使用以下css而不是你的css，什么都不会改变（希望:)），但选择器的效率更好

#Navigation .Button {
    background: #FFF;
    border: 2px solid #3B9BD9;
    color: #000;
}
#Navigation .Smallest {
    cursor: pointer;
}