2012-03-29 30 views
0

我調整使用javascript一個div的風格:爲什麼Internet Explorer會在某些情況下自動調整div的style.left值?

div.style.left = "486px"; 

I輸出值:

console.log("left after:" + div.style.left); 

輸出:

LOG:離開後:486px

看起來不錯。但我看到div不在那裏。我使用開發人員工具檢查內聯樣式:

left: 852px 

這不會總是發生。左值的某些更改正常工作。但在其他人身上,一些「額外」調整是在之後做出的。

它只發生在Internet Explorer(測試版本8)。經過Firefox,Chrome,Opera和Safari測試,並沒有發生。任何想法?

我正在做這個調整作爲瀏覽​​器縮放使用$(窗口).resize函數的反應。 我在最後使輸出「在......之後:」。我假設瀏覽器已完成所有縮放和重新定位的內容。我設定我的價值,我輸出它的最後,然後期望在CSS中看到這個值。這在大多數情況下都會發生,但有時(大變焦)我會得到這些不同的值。

編輯:僅當瀏覽器縮放設置爲150%或175%時纔會發生。例如,我將150%的左值設置爲567px。但在CSS中,當我回到縮放級別125%或更低時,它會得到851px。從200%轉發也可以工作(設置425px)。

+0

並沒有多說這個問題。你知道誰是元素的抵消父母嗎?據我所知,IE工具顯示相對於屏幕的偏移量,以及偏移父級。 – Joseph 2012-03-29 17:17:01

+0

div是從身體直接的小孩。抵消父母應該是身體。 – Ixx 2012-03-29 17:24:51

+0

我知道在IE8中有一個錯誤會導致一個有效的調整大小,直到你點擊屏幕或其他東西(我相信它是垂直調整大小)不觸發調整大小。如果您要添加這樣的樣式元素,您應該能夠使用DOM檢查器查看內聯樣式。 – 2012-03-29 17:34:13

回答

1

Absolute Positioning

的元件,其位置屬性有絕對的被說成是絕對定位的值,並完全從文件流中除去的:它根本不會影響隨後的元素。 它相對於其包含塊被定位,並且它爲正常流兒童以及位置屬性被設置爲絕對的後代建立了一個新的包含區塊。

Containing Block

如果位置屬性的值是絕對的,包含塊是最近的定位的祖先 - 換句話說,在最近的祖先,其位置屬性有絕對的值中的一個,固定的或相對的。包含塊由該祖先的填充邊緣形成。

元素自然具有static的位置,因此默認情況下不會使其成爲包含塊。證明,check this demo。嘗試將position:relative添加到身體,這應該使其成爲一個包含塊。

+0

不起作用,沒有變化 – Ixx 2012-03-29 17:46:55

+0

你可以發佈你的其他代碼嗎? – Joseph 2012-03-29 17:50:30

0

您正在修改的元素需要位置爲absoluterelative以便定位工作。

另外,由於您使用的是jQuery,因此請使用$(element).css('left', "852")而不是div.style.left。 jQuery更優雅地處理這個(和IE的異常)。

相關問題