Fatal编程技术网
  • html/
  • Html IE7默认元素为100%宽度

Html IE7默认元素为100%宽度

html css

Html IE7默认元素为100%宽度,html,css,internet-explorer-7,Html,Css,Internet Explorer 7,我的一个web应用程序遇到了一个非常令人沮丧的问题（最初不是我写的）。它在布局上使用了框架，这已经够吓人的了。我遇到的问题是，通过CSS设置背景颜色和边框的所有元素默认为100%宽度。我刚刚测试了div元素、段落元素等 我完全删除了样式表，然后对它进行了测试，我也遇到了同样的问题，所以问题不是样式表造成的 我编写了一个快速测试，以确保代码没有冲突，并使用了与我们相同的doctype和xmlns——我遇到了同样的问题。下面是示例代码 <!DOCTYPE HTML PUBLIC "-//W3C

我的一个web应用程序遇到了一个非常令人沮丧的问题（最初不是我写的）。它在布局上使用了框架，这已经够吓人的了。我遇到的问题是，通过CSS设置背景颜色和边框的所有元素默认为100%宽度。我刚刚测试了div元素、段落元素等

我完全删除了样式表，然后对它进行了测试，我也遇到了同样的问题，所以问题不是样式表造成的

我编写了一个快速测试，以确保代码没有冲突，并使用了与我们相同的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>


#试验{
边框：1px实心#ccc；
背景色：#ddd；
}
测试信息！
有什么想法吗？

我认为这是HTML/CSS所要求的。块元素会延伸整个宽度，除非有什么东西阻止它们

（FF具有相同的行为。）

div不是因为是块而默认为100%（父级大小）吗？您可以尝试将display更改为inline:#test{display:inline；}

正如Richard和BeefTurkey所说，div是块元素，将填充浏览器的宽度

您可以使用内联元素，例如跨距

<span id="test">
    Test information!
</span>
这并不是因为元素有一个背景或边框，它可以扩展到父元素的全部，而是因为它是一个块元素。背景或边框只会让您看到元素的实际大小

默认宽度实际上不是“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>


试验
#测试1{
浮动：左；
边框：1px实心#ccc；
背景色：#ddd；
}
#测试2{
浮动：左；
明确：两者皆有；
边框：1px实心#000；
背景色：#ccf；
}
测试信息！
测试信息！
我没有意识到这是默认行为。我刚刚在FF中测试了它，你是对的，完全一样。是的，显示：在这种情况下，内联有点麻烦，因为填充重叠了。好主意。 
<!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>