如何在 IE 中修復這個簡單的 CSS 浮動問題？
[英]How do I fix this simple CSS floating issue in IE?
問題描述
我有四個div元素浮動到左側。 第三個div被清除。
在 Firefox 和 Chrome 中，元素按預期定位：第一個和第二個div彼此相鄰，並且位於也彼此相鄰的第三個和第四個div之上。
IE7另一方面則以第四div鄰近第一和第二div與第三小號div下方。
我知道我可以通過在第二個div之后添加一個br元素來修復它，但如果我不需要，我寧願不編輯標記。 有沒有更優雅的方法來解決這個問題？
一段時間以來，我一直在嘗試使用 Google 進行修復，但還沒有找到，考慮到問題看起來多么基本，這令人驚訝。 也許我遺漏了一些明顯的東西，是否有一個參考站點列出了像這樣的簡單 CSS 問題，或者我只是對基本 CSS 一無所知？
編輯：在 Nazgulled“解決”問題后，我使示例代碼稍微復雜一些（見評論）。 現在有四個div而不是三個，第三個div被清除而不是第二個。
這是完整的源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>IE Float Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
div
{
width: 100px;
height: 100px;
color: white;
font-size: 3em;
float: left;
}
#divone
{
background-color: red;
}
#divtwo
{
background-color: blue;
}
#divthree
{
background-color: green;
clear: both;
}
#divfour
{
background-color: purple;
}
</style>
</head>
<body>
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>
<div id="divfour">four</div>
</body>
</html>
這是 Chrome 中的樣子：
這是在 IE7 中的樣子：
4 個解決方案
解決方案1
5 2009-01-25 05:07:44
我不知道這是否能解決您的真正問題，但我像這樣修復了您的示例：
- 從div 中刪除float屬性
- 從#divtwo 中刪除clear屬性
- 將float: left添加到#divtwo和#divthree
這使它在 Firefox 和 IE 7（我測試過的瀏覽器）中看起來都像您的 chrome 示例。
解決方案2
3 已采納 2009-10-04 07:06:17
幾個月后...
我放棄了單獨用 CSS 來解決這個問題的嘗試。 這是一個 IE7 錯誤，不接觸 HTML 就無法避免。
這種浮動模式的最終應用是在一個表單中，其中兩個div是輸入元素，另外兩個div是它們對應的標簽。 該模式以大型形式多次使用，我真的很想找到一個優雅的僅 CSS 解決方案。
我最終使用了面向對象的 CSS 框架，並用額外的div包裝了所有元素，以創建所需的布局，如 OOCSS 所要求的。 這是將我的靈魂從 IE7 的 CSS 地獄中拯救出來的唯一方法，一旦您完成初始布局，OOCSS 就不會那么糟糕。
事實上，一般的答案是，當您不知道自己在用 CSS 做什么時，就會提出這種問題。 如果您必須在藍月亮中創建一個復雜的布局，那么您可能不知道自己在做什么； 就像我問這個問題時的情況一樣。
雖然 IE7 確實無法正確呈現 CSS，但這也是我的一個錯誤范圍的情況。 CSS 不是天真的程序員認為的終極布局語言，而且 CSS 並非真正獨立於 HTML 的結構。 當我真正應該花時間學習 CSS 的基礎知識時，我再次選擇通過使用 OOCSS 框架來采取更簡單的方法。
唉，這就是最后期限的后果。
解決方案3
2 2009-01-25 08:06:41
我不確定您的最終目標是什么，但我建議將所有四個<div>包含在一個容器元素中並為其應用寬度，然后從#divthree刪除clear樣式。 這樣做將允許#divthree和#divfour在不清除它們的情況下移動到#divone和#divtwo下方：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>IE Float Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#divone, #divtwo, #divthree, #divfour
{
width: 100px;
height: 100px;
color: white;
font-size: 3em;
float: left;
}
#divone
{
background-color: red;
}
#divtwo
{
background-color: blue;
}
#divthree
{
background-color: green;
}
#divfour
{
background-color: purple;
}
#container {
width: 200px;
zoom: 1;
}
</style>
</head>
<body>
<div id="container">
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>
<div id="divfour">four</div>
</div>
</body>
</html>
#container上的zoom屬性對於避免IE6/7 Escape Floats Bug是必要的。
如果上述解決方案不可行，您可以在#divtwo之后添加一個<br>或<div> ，樣式為clear: left; ：
<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>
這是westciv.com 上浮動頁面布局示例中使用的技術。
解決方案4
0 2009-01-25 04:38:46
嘗試添加：
display:inline-block;
在#divtwo 中。 如果可行，我當然會為 IE7 添加一些條件注釋
Css IE樣式問題 - 如何在IE中更正這個簡單的導航菜單？
[英]Css IE styling issue - How can I correct this simple navigation menu in IE?
我需要在Wordpress網站上添加哪些特定於CSS的CSS來解決此問題？
[英]What ie-specific CSS do I need to add to my Wordpress site to fix this issue?
如何修復浮動 CSS 標簽始終處於活動狀態並在我的表單中顯示“無效輸入”？
[英]How do I fix floating CSS label always being active showing 'invalid input' in my form?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.