为啥在 IE 中替换 setInterval div 后我的容器会丢失其内容？

Posted 2023-03-06

【中文标题】为啥在 IE 中替换 setInterval div 后我的容器会丢失其内容？

【英文标题】：Why does my container lose its content after a setInterval div replacement in IE?为什么在 IE 中替换 setInterval div 后我的容器会丢失其内容？

【发布时间】：2012-10-07 22:09:55

【问题描述】：

我一直在使用 chrome 和 ff 开发网页。我最近被告知它也必须在 IE 中工作。我已经解决了 IE 双填充问题。问题是在 javascript setinterval 导致 div 被替换后，我的“网格”的内容消失了。只有在 IE 中查看页面时才会发生这种情况。

这里是通往动态创建和打印出来的页面的代码

    <div  id=\"col1a\" style=\"float:left; width:605px; height:300px;\"> \
            <div id=\"GridContent\" class=\"FormContent\"> \
                <div id=\"ContentPlaceHolder1_FormSection\" class=\"FormSection\"> \
                    <div id=\"ContentPlaceHolder1_ProgramGridHeader\" class=\"ProgramGridHeader\"> \
                        <div id=\"ContentPlaceHolder1_HeaderRow\" class=\"HeaderRow\"> \
                            <div readonly=\"readonly\" class=\"Cell\" style=\"width: 57px\">Stage</div><div class=\"Cell\" style=\"width: 78px\">Type</div><div class=\"Cell\" style=\"width: 50px\">Time</div><div class=\"Cell\" style=\"width: 44px\">Int</div><div class=\"Cell\" style=\"width: 44px\">Dry</div><div class=\"Cell\" style=\"width: 44px\">Wet</div><div class=\"Cell\" style=\"width: 52px\">RH%</div><div class=\"Cell\" style=\"width: 72px\">Option</div><div class=\"Cell\" style=\"width: 72px\">Damper</div><div class=\"Cell\" style=\"width: 44px\">Fan</div> \
                        </div><br /> \
                        <div class=\"Row\" position: relative;> \
                                 ";

以下是我仅适用于 IE 的 CSS

.Row  border: solid 0px green; float: left; min-width: 0; clear:both; position: relative; -webkit-border; padding 1;
.RowCompleted  border: solid 0px #7F9DB9; background-color: #C0C0C0; color: #000;
.RowNoShower  border: solid 0px #7F9DB9; background-color: #FFF; color: #000;  min-width: 0; 
.RowColdShower  border: solid 1px #7F9DB9; background-color: #ADD8E6; color: #000; 
.RowWarmShower  border: solid 1px #7F9DB9; background-color: #FB0; color: #000; 
.RowHotShower  border: solid 1px #7F9DB9; background-color: #F00; color: #FFF; 
.RowInProgress  border: solid 0px #7F9DB9; background-color: #0F0; color: #000;
.RowPaused  border: solid 0px #7F0DB9; background-color: #00F; color: #FFF;

非常感谢帮助理解内容消失的原因 --谢谢--

【问题讨论】：

我建议将此代码放在 jsfiddle.net 中，我们可以更好地查看。 html 有很多转义，它不太确定实际生成的是什么。

我还建议您学习一个简单的口头禅：使用正确的工具来完成工作。如果您有表格数据，请使用表格，并减少所有额外的标记。

@xivo 转义了这么多转义，因为这是带有实时数据的服务器响应，必须以我的嵌入式 Web 服务器可以理解的方式编写。在这种情况下，它是 sprintf() 语句中的 c 。上面的所有内容加上上下文高亮的需要使得使用表格变得非常困难。

@user1753671 我知道它是生成的，但这不是生成的代码吗？你给我们的问题有点减半。我们看不到消失的内容。您可以向我们展示某种类型的渲染 html 吗？每个浏览器都应该能够显示它。您可以向我们展示它应该显示的内容以及在 IE 中未显示的内容。用您当前的问题正确解决您的问题有点令人困惑和困难。

【参考方案1】：

某些版本的 IE 只会在 HTML 有效的情况下填充元素。

我会假设有一个未关闭的标签或额外的引号。

你能显示你试图用它替换的所有 HTML 吗？

来源：http://www.dottodotnet.com/2010/03/jquery-html-problems-in-internet.html

【讨论】：

我试图替换它的 html 是动态创建的，所以我从来不知道内容实际上是什么我所做的就是填写这种格式“代码” " %s 决定了服务器在该部分打印什么

您应该能够在您正在使用的浏览器的开发人员工具中检查实际响应。以下是有关 Chrome 开发者工具的一些文档：developers.google.com/chrome-developer-tools/docs/…

我一直在使用 chrome 开发工具，最近发现 IE 不喜欢服务器回发的内容。我正在从服务器返回信息，它看起来是正确的，但我不断收到一个框字符和代码行之间的一堆额外选项卡。

听起来好像它没有正确转换换行符。您可能想尝试在响应中运行类似这样的内容：textfixer.com/tutorials/javascript-line-breaks.php