Question

我有这个简化的代码：

<div class="container">
    <input type="submit" name="submit" class="submit" value="Sign Up">
</div>

它的CSS：

input.submit{
    padding-left: 40px;
    padding-right: 40px;
    float:right;
}
.container{
    background-color: #AAA;
    float:right;
    padding: 50px;
}

我希望div围绕输入按钮，浮动到右边，其大小等于按钮的大小+填充（50px）。在其他浏览器中它运行得很好，但在IE7中发生了两件奇怪的事情：

div的宽度延伸到整个网页。如果我从input.submit的CSS中删除float：那么div的大小是正确的。
输入按钮的宽度也比在其他浏览器中显示按钮时大得多。

这是我使用的doc类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

任何人都知道为什么会出现这些问题以及如何解决这些问题？

Answer 1

我不明白为什么float: right上需要input.submit，所以请将其删除。如果您需要它，您必须告诉我原因 - 可能有解决方法。

要解决第二个问题，请将overflow: visible添加到input.submit。

在这两个更改之后，它在IE7和IE9中看起来几乎相同：http://jsfiddle.net/33vmm/

在IE7中奇怪的浮动和填充

1 个答案: