CSS - 保證金是壞事？

我注意到一些瀏覽器在頁邊空白處有問題，尤其是當元素浮動時。舉例來說，我在Firefox中做的這個網站看起來很好，但IE7看起來完全沒有問題。我也在幾個Linux瀏覽器上進行了測試，其中一些出現類似的錯誤。CSS - 保證金是壞事？

該網站是 http://w3box.com/mat

這看起來在FF3.0罰款，據我可以告訴。在FF2還沒有看到它，或IE6。這是爲什麼發生？是因爲我有浮動DIVs與指定的利潤率？

有什麼我應該避免或應該做的不同？

編輯：所以它看起來像我的標籤是螺絲釘的來源。我在CSS中沒有定義的圖像中放置了圖像，這些圖像已經浮動在圖像上並與邊距相結合。這些搞砸了一切，我必須重做這些。

此外，當我使用XHTML Strict代替時發生了一些事情:) Thanx everyone！我會嘗試解決這個我自己的:)

來源

2010-01-25 Kenny Bones

在IE8中看起來不錯，如果你有興趣的話。 – Sapph 2010-01-25 09:07:24

嘗試自己開發'XHTML 1.0 strict'或'HTML 4.01 strict'網站。這解決了很多boxmodel問題， – 2010-01-25 09:16:35

謝謝！現在該網站看起來就像我錯誤的IE瀏覽器:)意味着我需要重新定位一切，但那很好！只要兩者都一樣。 :) Thanx的提示:) – 2010-01-26 06:50:16

Marging不壞，但IE has some troubles與浮動元素的邊距。雖然有很多修復的食譜，但我相信在你的情況下，你可以使用絕對定位而不是浮動+邊距（當圖像被文本包裹時，你並不需要「浮動」行爲）

來源

2010-01-25 09:14:35 Dmitry

這是IE7和錯誤不會發生在IE8中。剛剛測試過它。我還沒有在IE6中測試過它，因爲我找不到它仍然安裝的單個終端服務器。雖然我會嘗試絕對定位。沒有必要超過必要的混亂代碼！ :) – 2010-01-25 10:04:26

看到了，事情是。我真的不明白爲什麼會發生這種情況。我的意思是，DIV #contentInner甚至沒有浮點數。而這個利潤就像是翻了一番。它可能是我放在那裏的圖像？他們沒有自己的類，但我在標記中指定了CSS代碼。這可能是解釋？因爲我在標題菜單和#contentInner DIV中看到錯誤。並且這兩個標籤之前都有標籤。 – 2010-01-25 10:13:50

這是標籤這就是問題所在。 IE似乎在圖像後添加了一些空間。就像換行符或什麼的。如果我刪除標籤，問題就解決了。所以我可能不得不考慮定位它們。 – 2010-01-25 10:24:01

我會建議使用某種形式的CSS框架（藍圖CSS，960網格等），因爲他們有一些邊距，填充和其他常見的HTML元素重置。你應該發現使用框架跨瀏覽器開發更容易。

來源

2010-01-25 09:09:44 Kane

不同的瀏覽器有不同的方式來處理盒子模型。大多數情況下，在FF，Chrome或IE8中顯示效果良好的網站在IE6和7中可能會出現問題。要解決此問題，您可以嘗試將所有默認邊距和填充設置爲0（並根據需要調整它們元素）：

* {margin：0px; padding：0px; } //最簡單的規則...

要了解更多關於CSS重置你可以看看：http://meyerweb.com/eric/tools/css/reset/

然後用條件註釋適用於IE7和不同風格的6。

來源

2010-01-25 09:11:10 mamoo

剛試過這個，它並沒有真的做任何事情。無論如何，我都會在CSS和HTML中設置它。我把在CSS重置代碼雖然:) – 2010-01-25 10:01:29

我不同意如果您想了解關於CSS曲線部分的知識，那麼不幸的是，您將瞭解不同瀏覽器對CSS做出反應的方式。我甚至不會建議使用重置樣式表。如果你將這樣做了很多，學習CSS如何工作。如果你使用一個庫或者一個你不明白的樣式表，你將如何修復它。

來源

2010-01-25 09:16:56 matpol

正如其他答案中提到的那樣，它與IE對盒子model的解釋有關。

每當任何東西浮動時，IE往往會使指定的邊距加倍。這可以通過使用conditional comments的IE的額外樣式表修復。

參見：http://www.positioniseverything.net/explorer/doubled-margin.html

來源

2010-01-25 09:16:56

但是這不是用IE7修復的嗎？我也這麼想。但它似乎不是這樣。 – 2010-01-25 10:05:26

IE7對於盒子模型仍然有點古怪 - 它們修復了大多數錯誤，但仍然存在一些 – 2010-01-25 10:09:13

沒有什麼錯用利潤率。

舊版本的IE有一個bug，單靠這一點遠遠不足以避免使用CSS的核心佈局特性之一。具體而言，當你漂浮的物體上，並在同一方向上的保證金，例如：

.whatever { 
    float: right; 
    margin-right: 5px; 
}

您可以處理這種多種方式，這取決於你的佈局這個錯誤發生在IE瀏覽器。一種方法是在你的盒子周圍增加另一個div，並使用填充來複制相同的空間。

來源

2010-01-25 09:19:20

邊距和填充不會產生相同的效果。這是盒子模型的重點。它只會產生相同的效果，沒有背景和邊框。 – 2010-01-25 09:37:09

是的，你說得對，他們不會產生相同的效果，但是如果你正在修復一個bug，你可能會切換它們以在對象之間提供相同的空間。這絕對取決於情況，但它可以是一種選擇。 – 2010-01-25 09:42:23

約定+1恢復 - 好，如果你編輯你的答案，我可以刪除它。 :-) – 2010-01-25 10:01:40

CSS - 保證金是壞事？

回答

相關問題