爲什麼嵌套的Div出現在IE的父級中

對不起，我沒有準確的代碼，但希望這適用於我提供的示例。爲什麼嵌套的Div出現在IE的父級中

爲什麼在IE中，一些嵌套的div彈出並坐在錯誤的位置（例如，距離它應該是200px）。

<div style="width:1024px;height:103px;background-color:green;"> 
    <div style="float:left;width:300px;height:103px;"><img src="LOGO URL"/> 
    </div> 
    <div style="float:right;width:180px;height:103px;"> 
    </div> 
</div>

有沒有人明白我的意思？我很確定它與雙倍的利潤率無關。我還應該打擾使網站與IE7和6兼容嗎？

我想學習HTML的正確方法。我希望能夠確保我的代碼始終與所有瀏覽器兼容，並且可供殘疾人訪問。有什麼地方可以推薦我學習「正確」的做法嗎？我瞭解大多數HTML，但兼容性可能會有問題。

來源

2011-07-30 Sam

您是否嘗試在頂級div上添加'white-space：nowrap;'？ – aroth

因爲它們正在漂浮。 – afaolek

即使在IE6中，我也無法重現：http://jsfiddle.net/UZYdQ/show/。您需要向我們展示您的實際代碼。 – thirtydot

-1

你的IE問題很可能是因爲float：right元素出現在它的兄弟之後。（見下面的數字3）。

談到如何學習HTML和CSS的最佳做法，我會建議玩CSS Zen garden，看看如何使用「靜態」html建立不同的驚人設計。

望着HTML我看到以下問題：

指定靜態的寬度和高度是不是一個好主意
浮動權元素的任何其他同級之前應該出現（否則IE無法正確渲染它） - （這很可能是問題）。
有浮動：左爲其他元素是沒有必要的
添加一個明確的：無論是在所有的兄弟姐妹年底將確保家長將在高度擴張（而無需指定高度）

所以我會改變你的HTML到這個：

<div> 
    <div style="float:right;"></div> 
    <div><img src="LOGO URL"/></div> 
    <div style="clear:both"></div> 
</div>

來源

2011-07-30 11:13:05

你永遠不需要額外的HTML來清除浮動。 – Rob

而不是你的父母可以自然擴大身高 –

非常感謝你valipour。我將我從你身上學到的東西運用到了我的主題中，並且效果很好。我很高興我學到了一些東西。 – Sam

在現代瀏覽器中它的工作原理是否相同？父元素永遠不會展開以包含浮動元素。要做你想做的事，你需要浮動父項或給它一個'overflow：auto'CSS屬性。但是將父div的高度固定爲103px仍然會限制事物。

來源

2011-07-30 11:08:20 Rob

三個'div'中的每一個都有'height：103px'，所以它不太可能是這樣。 – thirtydot

@thirtydot - 他說他們「脫離了div」，所以我假設他會對數值或內容進行一些操縱來實現。 – Rob

@Rob - 「出來的div」是我的問題。溢出：汽車;解決它很好。我認爲這也是這個問題。 – Studiostefan

爲什麼嵌套的Div出現在IE的父級中

回答

相關問題