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％宽度的元素

回答

相关问题