奇怪的漂浮和填充在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

回答

相關問題