IE7：position：絕對不會將元素從文檔流中移除

我們試圖通過隱藏實際複選框input元素並使用input:checked+label CSS選擇器更改標籤的樣式來創建一個帶有自定義複選框的頁面。這工作正常，但在IE7隱藏的複選框仍然佔用文檔流的空間，搞亂了佈局。IE7：position：絕對不會將元素從文檔流中移除

這裏的問題的一個非常簡化的演示：

<style type="text/css"> 
div.hello { position: absolute; left: 200px; } 
</style> 

<ul> 
    <li><div class="hello">Hello</div><div>First</div></li> 
    <li><div class="hello">Hello</div><div>Second</div></li> 
    <li><div class="hello">Hello</div><div>Third</div></li> 
</ul>

看來，被取出的公文流轉與position:absolute任何塊元素仍然佔用的垂直空間上的IE7。

這裏是什麼樣子了新版瀏覽器：

First   Hello 
Second  Hello 
Third   Hello

在IE7它看起來像這樣：

   Hello 
First 
       Hello 
Second 
       Hello 
Third

爲了更接近我們的實際情況爲例，看this fiddle。我們錯過了什麼嗎？我們如何隱藏複選框元素，使其仍然可以工作，並且在佈局中不佔用空間？

來源

2012-08-14 Kaivosukeltaja

你可以使用這個CSS來設置輸入的樣式來隱藏ie中的輸入。（就像@Aody97所說的）

input { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    opacity: 0; 
    width: 0px; 
    height: 0px; 
}

但是爲了去除由輸入產生的空間。刪除輸入標籤之間的空格。像<input /><input />不<input /> <input />

來源

2012-08-14 13:57:35

嘗試的造型與input這組風格：

input { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    opacity: 0; 
    width: 0px; 
    height: 0px; 
}

這似乎在IE瀏覽器了。我希望有幫助！

來源

2012-08-14 12:09:45 Chris

對不起，IE7仍保留空間爲'input's當我試圖用小提琴：http://jsfiddle.net/naRUc/20/ – Kaivosukeltaja 2012-08-14 12:18:47

確保有在輸入之間沒有空格結束標籤和新的輸入標籤。請確保''不是''。 – 2012-08-14 12:39:55

@BurakTAMTURK：刪除所有空白實際上解決了這個問題。謝謝！你可以添加這個答案，以便我可以接受它嗎？ – Kaivosukeltaja 2012-08-14 12:53:32

我沒有IE7，所以無法測試

但我只是把display:none有

input { display:none }

來源

2012-08-14 12:23:47

在IE7上，這個複選框不能用'display：none'工作，不能使用'：selected'。 – Kaivosukeltaja 2012-08-14 12:24:46

@Kaivosukeltaja反正IE不支持'：selected'。 – Chris 2012-08-14 12:27:54

哦，該死的IE再次。因此，爲了「隱藏」輸入，我會把'z-index：-1'，'display：block'放在'position：absolute'中，左上角的重量高度像@Abody97建議的，不管做什麼 – 2012-08-14 12:28:50

:checked是一個CSS3選擇器和IE7中不起作用。

~~爲什麼不隱藏您的複選框display:none而不是絕對定位？~~

你也可以用visibility: hidden;

來源

2012-08-14 12:35:16 LeBen

'：checked'在IE6-8上可以使用selectivizr：http://selectivizr.com/ 此外，'visibility：hidden'即使在現代瀏覽器中也不會從文檔流中移除元素。 – Kaivosukeltaja 2012-08-14 12:52:17

是的，沒錯。事實上，我沒有看到任何理由將其刪除，對我而言，它只是不可見的。但是現在我明白了真正的問題：空間。抱歉! – LeBen 2012-08-14 14:06:04

隱藏它通過只刪除規則label { display: block; }，這似乎工作; JSFiddle。

來源

2012-08-14 12:51:03 Chris

不幸的是，我們需要將標籤保留爲「display：block」，因爲我們需要在最終佈局中進行大量的樣式設計。 – Kaivosukeltaja 2012-08-14 12:57:33

我已經添加了以下CSS規則來解決它：

label 
{ 
    display: block; 
    *zoom: 1; 
}

這使得IE7 hasLayout的行爲，使其正確呈現的東西。規則之前的*確保這僅適用於IE7。如果您需要有效的CSS 2.1解決方案，請回復，我會嘗試以其他方式修復它。

來源

2012-08-14 13:36:31 keaukraine

IE7：position：絕對不會將元素從文檔流中移除

回答

相關問題