奇怪的漂浮和填充在IE7

我有这样的简化代码：奇怪的漂浮和填充在IE7

<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的大小是正确的。
输入按钮的宽度也比按钮在其他浏览器中显示时大得多。

这是我使用的文档类型：

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

谁知道为什么这些问题的发生，以及如何解决这些问题？

来源

2011-09-17 Jack

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

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

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

来源

2011-09-17 14:49:08 thirtydot

这仅仅是从一个登记表的简化的代码。我希望按钮向右浮动，使其与其他元素对齐。溢出：可见工作正常。谢谢。这是IE7的错误吗？ – Jack

是的。你可以使用http://jsfiddle.net/向我展示更多注册表单吗？ – thirtydot

哦，我想制作的表单与Facebook主页上的注册表单几乎相同，当您未登录时。但是注册按钮浮动到右侧，与上面的文本框对齐。 – Jack

奇怪的漂浮和填充在IE7

回答

相关问题