爲什麼這個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列不能一直走到正確的位置？

回答

相關問題