設置window.open（）的HTML在Internet Explorer中產生奇怪的樣式問題

Question

所以我有一些JavaScript可以打開一個沒有目標URL的新窗口。 然后，我想將該窗口的HTML內容設置為變量的內容，即一長串有效的HTML。

var myHtmlHead = "<link href='/foo/my.css'...";
var myHtmlBody = "<div id='foo'>...'";
var myWindow= window.open("", "MyWindow","height=500,width=500");

myWindow.document.head.innerHTML = myHtmlHead;
myWindow.document.body.innerHTML = myHtmlBody;

為了便於閱讀，我刪去了內容。 問題是，盡管它在Chrome和Firefox中完美運行，但IE引發了許多奇怪的樣式問題； CSS加載，但所有DIV都居中且重疊，並且一旦我調整窗口大小甚至是像素，它就會自動校正。 我認為這是由於以下事實：在加載窗口之后，我正在加載CSS，並且在窗口需要重繪之前，它無法正確應用。

是否有辦法解決此問題，或以編程方式從父頁面的JS觸發重繪？

編輯：IE版本是11.0.9600，盡管它與Chrome 49兼容。

Answer 1

我真的不明白這樣做的意義。 最佳做法是創建另一個頁面，然后通過URL發送變量以動態生成內容。

無論如何，Chrome和Firefox都比IE“更智能”。 您必須有一些HTML驗證問題。 我可以看到在您的示例中您缺少了<doctype> 。
我建議打印myWindow變量並檢查HTML是否有效，這可以幫助您：
https://validator.w3.org/

Answer 2

鑒於信息量少（例如，不是完整的最小HTML文本集，例如，瀏覽器版本上沒有詳細信息，等等），這有點猜測。頁面呈現后，選擇一個具有布局的元素（例如div）並強制頁面重排。 這是應該執行的功能-通過查詢屬性。 -這未經測試

function forceReflow(myelement){
    var myforceheight = myelement.offsetHeight;
}

此處提供一些背景信息： https : //gist.github.com/paulirish/5d52fb081b3570c81e3a

Answer 3

通過繼續實驗找到了答案。 就我自己而言，我能夠獲得更加一致的結果，但是在設置<body>內容之后，使用CSS鏈接設置<head> html。 IE似乎可以更好地處理CSS的應用，盡管我不能說為什么。

以前似乎正在應用樣式（顏色，字體，背景等），但未使用大小，位置，顯示布局等位置信息。設置<body>內容后設置<head>似乎可以解決此問題。

設置window.open（）的HTML在Internet Explorer中產生奇怪的樣式問題

問題描述

3 個解決方案

解決方案1
0 2016-09-14 19:42:16

解決方案2
0 2016-09-14 19:56:35

解決方案3
0 已采納 2016-09-15 10:30:58

設置window.open（）的HTML在Internet Explorer中產生奇怪的樣式問題

問題描述

3 個解決方案

解決方案1 0 2016-09-14 19:42:16

解決方案2 0 2016-09-14 19:56:35

解決方案3 0 已采納 2016-09-15 10:30:58

解決方案1
0 2016-09-14 19:42:16

解決方案2
0 2016-09-14 19:56:35

解決方案3
0 已采納 2016-09-15 10:30:58