Internet Explorer 7上絕對定位的父級中的子元素的百分比寬度

241

我有一個絕對定位的div包含幾個孩子，其中一個是相對定位的div。當我在子div上使用基於百分比的寬度時，它在Internet Explorer 7上摺疊爲「0」寬度，但不在Firefox或Safari上。Internet Explorer 7上絕對定位的父級中的子元素的百分比寬度

如果我使用像素寬度，它的工作原理。如果父母相對定位，則子女的百分比寬度起作用。

有什麼我在這裏失蹤？
有沒有簡單的解決方法，除了像素爲基礎的寬度在孩子？
是否有CSS規範的一個區域覆蓋了這個？

來源

2008-07-31 Kevin Dente

127

父div需要定義width，無論是以像素或百分比。在因特網資源管理器 7中，父div需要定義width以使子百分比div能夠正常工作。

來源

2008-08-01 12:22:51

以下是一些示例代碼。我認爲這是你正在尋找的。以下顯示在Firefox 3（mac）和IE7中完全相同。

#absdiv { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 100px; 
 
    width: 80%; 
 
    height: 60%; 
 
    background: #999; 
 
} 
 

 
#pctchild { 
 
    width: 60%; 
 
    height: 40%; 
 
    background: #CCC; 
 
} 
 

 
#reldiv { 
 
    position: relative; 
 
    left: 20px; 
 
    top: 20px; 
 
    height: 25px; 
 
    width: 40%; 
 
    background: red; 
 
}

<div id="absdiv"> 
 
    <div id="reldiv"></div> 
 
    <div id="pctchild"></div> 
 
</div>

來源

2008-08-05 05:54:23

IE之前8具有與其盒模型的時間方面是最值得注意的是創建具有基於百分比寬度的問題。在你的情況下，這裏絕對定位div默認沒有寬度。它的寬度將根據其內容的像素寬度計算出來，並將在內容呈現後計算。所以在IE瀏覽器遇到和呈現你的相對定位div其父母的寬度爲0，因此它爲什麼它本身崩潰爲0.

如果你想深入討論這個以及大量的工作示例，一個gander here。

來源

2008-09-04 09:02:42

爲什麼在IE7中爲絕對定位的父級工作而沒有百分比寬度的孩子？

因爲它是互聯網爆

是否有我丟失的東西嗎？

也就是說，要提高你的同事/客戶的IE認識。

除了基於像素的寬度還有一個簡單的修復方法嗎？

使用em單位，因爲它們在創建液體佈局時更有用，因爲它們可以用於填充和邊距以及字體大小。因此，如果您的文本被調整大小（這實際上就是您需要的），那麼您的文本空間會隨着文本的增加而成比例地縮小。我不認爲百分比比ems更好地控制;沒有什麼可以阻止你指定百分之幾的ems（0.01 em），並且瀏覽器會解釋它認爲合適的。

是否有覆蓋此CSS規範的區域？

沒有，據我所知em的％和s是專門用於CSS 1.0的字體大小。

來源

2009-05-13 07:47:40 lock

我認爲這與hasLayout屬性在舊瀏覽器中的實現方式有關。

你有沒有在IE8中試過你的代碼，看看它是否也在那裏工作？ IE8有一個調試器（F12），也可以在IE7模式下運行。

來源

2010-10-22 16:21:10 Mike

Internet Explorer 7上絕對定位的父級中的子元素的百分比寬度

回答

相關問題