为什么这个div列不能一直走到正确的位置？

足够强烈，我的网站在Internet Explorer中呈现良好，但在基于Mozilla的浏览器中失败。为什么这个div列不能一直走到正确的位置？

下面是截图： alt text

有谁知道为什么“右面板中的”不走一路向右？你可以看到它是如何不与“顶板”右边缘一字排开：

#container 
{ 
    margin: 0 auto; 
    width: 750px; 
    background-color: #ffffff; 
} 

#top-panel 
{ 
    padding-left: 10px; 
    background-color: #000000; 
    text-align: left; 
    width: 100%; 
    height: 88px; 
} 

#left-panel 
{ 
    padding-top: 10px; 
    text-align: center; 
    background-color: #ffffff; 
    border-right: 1px dashed #000000; 
    float: left; 
    width: 250px; 
} 

#right-panel 
{ 
    background-color: #ffffff; 
    float: right; 
    width: 449px; 
} 

.clear 
{ 
    clear:both; 
    line-height:0; 
}

如果有人想看到实际的网站是：Math Relay

来源

2009-11-18 KingNestor

尝试删除它，看看它是否排队：padding-left：10px;这可能会做到。 – kemiller2002 2009-11-18 20:49:36

当您申请宽度：100 ％和使用填充左：10px另外，它先计算宽度，然后应用填充，所以实际上你的CSS声明是问题。尝试将其设置为固定宽度。

来源

2009-11-18 20:51:39 jaywon

上述语句中的_it_指的是Firefox，而不是IE6。（这就是为什么在发布网页看起来确定的IE6） – Dexter 2009-11-18 21:02:19

注意，有DOCTYPE IE6使用正确的CSS盒模型，即宽度和元素是它的宽度，边框和填充的总和。如果没有DOCTYPE，IE6会进入怪异模式，并使用“宽度”设置宽度的盒子模型。请注意，所有现代浏览器都使用以前的盒子模型。 – moorej 2009-11-18 21:12:55

它是填充左：10px;在＃顶部面板

设置为0，你会看到他们排队。

尝试使用FireBug，这就是我发现问题的方式。

来源

2009-11-18 20:51:58 Glennular

这是你的#top-panel这是10px更大，你#container因为你padding-left: 10px;

只需添加10px您#container，这将是很好的。

来源

2009-11-18 20:52:07

我不认为您要调整#container以适合cnotent，而是要将您的内容（#top_panel）正确地放入您的#container中。 – jaywon 2009-11-18 20:56:35

@jaywon +1：的确如此。实际上，10像素到'＃容器'根本就不会有任何好处 - '＃顶部面板'仍然会占用'＃容器'的宽度再加上10个像素并溢出新宽度。 – 2009-11-18 21:15:00

Padding-Left：10px导致右侧出现额外10个像素。

来源

2009-11-18 20:53:32 jgallant

从#top-panel中删除width: 100%。

来源

2009-11-18 21:00:18

除了其他的答案的线条，但我希望解释发生了什么幕后，太：

的width: 100%上#top-panel指div的内容区域的宽度，不包括边框，填充和利润率。因此，当你同时指定width: 100%和padding-left: 10px#top-panel包括填充的宽度实际上是10px的+ 750px（填充加#container宽度的100％。）

最好的解决方案在我看来是从#top-panel删除width: 100%。这将使div占用父元素的整个宽度，但不会溢出#container。

页面看起来在Internet Explorer中确定自从IE错误地包含填充和边界计算div的宽度时，如果页面在怪异模式呈现。关于这个bug的更多细节可以在here找到。

来源

2009-11-18 21:01:38

为什么这个div列不能一直走到正确的位置？

回答

相关问题