在IE瀏覽器的寬度與IE瀏覽器不同的寬度div

我正在處理一個用戶控件，它向服務器發送異步信息。我希望用戶控件淡入淡出，並在工作時顯示「正在發送...」消息和gif。要做到這一點，我試圖絕對定位一個半透明的div高於控制的主div。事實證明，它比應該更難。我終於看到它在Firefox中看起來確定，但進入IE瀏覽器，發現控制的主要div甚至不是正確的寬度。在IE瀏覽器的寬度與IE瀏覽器不同的寬度div

我想總寬度爲275px。所以在Firefox我把它設計得有

width: 245px; margin 36px 15px 46px 15px;

所以寬度+邊距= 275，這就是它如何呈現。在IE瀏覽器中，瀏覽器正在從寬度中減去邊距，所以總寬度爲245，邊距爲15px。好吧，我發現了兩種瀏覽器在特殊模式儘管運行......我想......的文檔類型爲：

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>

我的理解是，這是什麼樣的故事模式是應該做的，但在IE和Firefox儘管它們都處於怪癖模式，但我不知道該怎麼做。

來源

2013-02-25 xr280xr

您的文檔類型不正確。它應該是：<！！DOCTYPE HTML PUBLIC「 - // W3C // DTD HTML 4.01 Transitional // EN」「http://www.w3.org/TR/html4/loose.dtd」>'然而，我只會使用更簡單的HTML5文檔類型：'<！DOCTYPE html>'。希望如果你沒有其他錯誤，這將意味着這兩個瀏覽器的標準允許你輕鬆對齊div。 – tw16 2013-02-25 19:52:59

謝謝你指出。我一直在閱讀關於doctype聲明效果的混合事物。唯一的問題是，文檔類型在我們主要的面向公衆的網站的母版頁上，所以目前我認爲我不能改變它。 – xr280xr 2013-02-25 21:20:47

那麼有一個doctype是不正確的。瀏覽器將以怪癖模式結束。所以你不妨改變它。你能提供一個鏈接到該網站？您可以使用正確的文檔類型（即標準模式）測試網站的外觀。只需打開IE開發工具（按F12），並將瀏覽器+文檔模式更改爲IE9標準。 – tw16 2013-02-25 22:54:18

它會更容易，如果你發佈一個鏈接，但如果我的假設是正確的，你可以通過使用像這樣

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

meta標籤強制IE模式的迴應顯然，這將取決於不同你想用什麼版本。同樣，你可以強制出現兼容模式，進入怪異模式等等。我從來沒有在Firefox中遇到過這個問題，所以不能說這個問題，但我會想象Mozilla有類似的東西。

但我認爲你的問題可以通過設置盒子模型來解決。使用這個CSS類的塊元素的問題

#yourdiv { box-sizing: border-box }

這將有助於減輕不同瀏覽器的盒模型渲染的痛苦。更多關於盒子大小的信息here。

此外，不要忘了display: block，因爲有時這將解決古怪問題。

來源

2013-02-25 20:24:38

在IE瀏覽器的寬度與IE瀏覽器不同的寬度div

回答

相關問題