IE7中奇怪的浮动和填充答案

【问题标题】：Strange floating and padding in IE7IE7中奇怪的浮动和填充
【发布时间】：2011-09-17 22:49:08
【问题描述】：

我有这个简化的代码：

<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 中发生了 2 个奇怪的事情：

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

这是我使用的文档类型：

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

有谁知道为什么会出现这些问题以及如何解决这些问题？

【问题讨论】：

标签： css internet-explorer-7

【解决方案1】：

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

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

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

【讨论】：

这只是注册表格中的简化代码。我希望按钮向右浮动，使其与其他元素对齐。溢出：可见工作正常。谢谢你。这是IE7的bug吗？
哦，我要制作的表格和Facebook主页的注册表几乎一样，当您没有登录时。但是注册按钮浮动到右侧，与文本对齐上面的框。