0

我在 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>
4

1 回答 1

0

我建议做的一件事是检查父容器（不知何故在dt这里）具有适当的宽度来容纳两个元素，然后将width属性设置为input元素。

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

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

#Navigation .Button {
    background: #FFF;
    border: 2px solid #3B9BD9;
    color: #000;
}
#Navigation .Smallest {
    cursor: pointer;
}
于 2012-07-02T09:53:52.483 回答