IE8 在包装 <pre> 标记中重复文本答案

【问题标题】：IE8 duplicates text in wrapping <pre> tagsIE8 在包装 <pre> 标记中重复文本
【发布时间】：2019-06-18 12:04:01
【问题描述】：

我有一个网页，我在其中将文本放入“div”内的“pre”标签中，该标签会根据窗口大小调整大小。如果“div”太小以至于“pre”中的文本水平溢出，我希望文本在换行符处换行。

这是演示问题的 html：

<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
</head>
<body>
<style type="text/css">
pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}
</style>
<div id="test">
<pre>
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
this is some long text that seems to wrap inappropriately if the window in ie8 is the wrong width.
</pre>
</div>
<script type="text/javascript">
//<![CDATA[
$(function() {
    $(window).resize(function() {
        $("#test").height($(window).height() - $("#test").offset().top - 20 + "px");
        $("#test").width($(window).width() - $("#test").offset().left - 20 + "px");
    });
    $(window).resize();
});
//]]>
</script>
</body>
</html>

这在我测试过的 Firefox、Safari 和 Chrome 版本中运行良好，但在 IE8 中出现了一些重复的文本。

第一行重复了单词“width”。任何想法如何解决这个问题？

【问题讨论】：

标签： html internet-explorer-8 word-wrap

【解决方案1】：

我在这里找到了答案：http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

在后来的一次更新中，pre标签中包含了一个宽度，这似乎解决了这个问题。

【讨论】：