2016-03-03 64 views
-5

在過去的幾天裏,我一直在抨擊一個真正奇怪的佈局錯誤。它只在Windows上的Edge上顯示;如果我告訴Web瀏覽器在IE10模式下運行,一切都很好。我嘗試過的每一個其他網頁瀏覽器都表現完美。這只是邊緣。 (下面的屏幕截圖是在Microsoft Win7 VM鏡像上進行的,明確用於在IE11上進行測試,但是真實的人已經證實了這一點。)這種佈局適用於Chrome,FF,IE10 ...但不是Edge?

不幸的是,我的程序是這個充滿Javascript的巨大,複雜的Polymer事物,最低限度的例子真的很難。這是我的下一步,但現在我希望有人會認識到發生了什麼。

我得到的是一個文本列,在一個可滾動的內部提供樣式的聚合物容器中。聚合物容器具有白色背景。我所看到的是,Edge上的容器尺寸總是比文本小。看到這些截圖;左邊的Chrome(正確),右邊的邊緣(不正確)。對不起,糟糕的圖像,但這些應該證明這個問題。

Bottom of the text, in Chrome Bottom of the text, in Edge

粉紅色的盒子是一個填充塊,我在底部加入使這個問題更加明顯。

什麼是甚至weder是在Edge上,白色區域的高度---即可滾動內容器的大小---看起來與視口大小相同。就是說,就好像它是height: 100%(它不是)。事實上,調查顯示它更像max-height: 100%,但將明確的最大高度設置爲大於該值的值似乎什麼也不做。可滾動區域的處理方式有問題嗎?

我完全感到困惑。

如果你想用它自己玩(請做!),請點擊此鏈接(https://cowlark.com/gruntle/?id=0ByWQADzU1i2wSUpsbzFOLUlYRUk。我會保持它幾天的滾動元件在BODY > ts-application > iron-pages > #game白框是.gameContainer元素。 。裏面你需要做視足夠小,內容開始滾動,使怪異的行爲顯示了更新:鏈接的不再有效

如果沒有人有任何想法,我將開始。痛苦地從我的應用程序中撕掉所有動態內容,以產生一個較小的例子,但是......有沒有人有任何想法?

更新:

因此,它似乎只在Win7上的Edge模式IE11上體現。它在Win10上的Edge上顯示而不是

因此,我相當肯定,這是Win7 Edge上的一個普通的佈局錯誤,我不在乎使其工作。鑑於它可以在非邊緣模式下在IE11上運行,我可能會考慮迫使頁面在IE10模式下工作,但我懷疑這不值得。

+0

這是IE瀏覽器有關嗎?邊緣沒有IE10模式。你確定你不是在談論IE11嗎? –

+0

你錯過了父容器上的'.clearfix'嗎?它看起來像一個破碎的浮動。 – scrappedcola

+0

@MartinBeeby好的,這可能會更清楚---這是邊緣模式下的IE11。但是IE10在IE10模式下工作正常。 –

回答

1

IE11中的邊緣模式不使用邊緣渲染引擎,而是使用mshtml渲染引擎。邊緣模式只是Internet Explorer中的最新渲染模式,與Windows 10上MS Edge中使用的邊緣渲染引擎不同。

我建議使用IE10模式讓你側面呈現正確,如果你不能找出問題的根本原因。其他瀏覽器(如MS Edge)無論如何都會忽略文檔模式。

也許這個網站有助於澄清一些事情:https://msdn.microsoft.com/en-us/library/dn904497%28v=vs.85%29.aspx#document_modeshttps://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx

相關問題