IE7默認設置爲100％寬度的元素

我對我工作的Web應用程序有一個非常令人沮喪的問題（我最初並沒有寫它）。它足夠使用框架來進行佈局。我遇到的問題是所有背景顏色和邊框通過CSS設置的元素默認爲100％寬度。我剛剛測試了div元素，段落元素等。IE7默認設置爲100％寬度的元素

我完全刪除了樣式表，然後測試它，並且我遇到了同樣的問題，所以它不是導致問題的樣式表。

我寫了一個快速測試，以確保它不是衝突的代碼，並使用與我們相同的doctype和xmlns - 我遇到同樣的問題。這是示例代碼。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
    #test { 
     border:1px solid #ccc; 
     background-color:#ddd; 
    } 
</style> 
</head> 
<body> 
    <div id="test"> 
     Test information! 
    </div> 
</body> 
</html>

任何想法？

來源

2009-03-06 Kezzer

我認爲這是HTML/CSS所必需的。塊元素擴展了整個寬度，除非有什麼要阻止它們。

（FF具有相同的行爲。）

來源

2009-03-06 11:23:50 Richard

我沒有意識到這是默認行爲。我只是在FF中測試它，你是對的，完全一樣。 – Kezzer 2009-03-06 11:29:00

不要div的默認，因爲他們是塊（家長大小）100％？您可以嘗試將顯示內容更改爲內聯：#test {display：inline;}

來源

2009-03-06 11:26:09 BeefTurkey

是的顯示：在這種情況下，內聯是一種痛苦，因爲填充的重疊。好主意，但。 – Kezzer 2009-03-06 11:30:02

正如Richard和BeefTurkey所說，div是塊元素並且會填充瀏覽器的寬度。

您可以使用一個內聯元素，比如跨度

<span id="test"> 
    Test information! 
</span>

或添加一些樣式到您的div來強制它是內聯

div#test { display: inline; }

來源

2009-03-06 11:31:31

這不是因爲該元素有一個背景或邊界，它擴展到父項的全部，這是因爲它是一個塊元素。背景或邊界只會讓你看到元素的真實性。

默認寬度實際上不是「100％」，而是「自動」。實際的區別在於，包含邊框的元素使用寬度的100％，而不是寬度（不包括邊框）變爲寬度的100％（使寬度包括邊框比其父寬）。

如果您不希望元素使用可用寬度，則可以將其設置爲浮動元素。然後它會根據它的內容進行調整。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
    #test1 { 
     float: left; 
     border:1px solid #ccc; 
     background-color: #ddd; 
    } 
    #test2 { 
     float: left; 
     clear: both; 
     border:1px solid #000; 
     background-color: #ccf; 
    } 
    </style> 
</head> 
<body> 
    <div id="test1"> 
     Test information! 
    </div> 
    <div id="test2"> 
     Test information! 
    </div> 
</body> 
</html>

來源

2009-03-06 11:38:19 Guffa

IE7默認設置爲100％寬度的元素

回答

相關問題