javascript - 设置 window.open() 的 HTML 在 Internet Explorer 中产生奇怪的样式问题

标签 javascript jquery html css internet-explorer

所以我有一些 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 等兼容。

最佳答案

考虑到少量信息(不是完整的最小 HTML 文本集,没有浏览器版本的详细信息等),这有点猜测。页面呈现后,选择一个具有布局的元素(例如 div ) 并强制页面重新流动。这是一个应该执行此操作的函数 - 通过属性查询。 - 这是未经测试的

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

这里有一些背景信息:https://gist.github.com/paulirish/5d52fb081b3570c81e3a

关于javascript - 设置 window.open() 的 HTML 在 Internet Explorer 中产生奇怪的样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39493686/

相关文章:

javascript - 将javascript变量添加到javascript src?

javascript - Highcharts:点击时显示条形图的一部分

javascript - 将 html 元素插入文本字符串以匹配另一个 html 字符串

jquery - 无法让 SlidesJS 工作

html - 如何在父级中选择最后一个子元素或第一个子元素? (CSS-HTML)

html - 文本输入元素内的 Font Awesome 图标

javascript - 无法使用 JavaScript 删除复选框

javascript - 需要帮助才能理解一段代码

javascript - jQuery各宽度问题

javascript - 在聊天框中自动滚动 javascript 函数