IE8 duplicates text in wrapping <pre> tags_问答_开发者

IE8 duplicates text in wrapping <pre> tags

开发者 https://www.devze.com 2022-12-20 09:59 出处：网络

I have a webpage where I put a text into a \"pre\" tag that is i开发者_JS百科nside a \"div\" that resizes with the window size. If the \"div\" is so small that the text in the \"pre\" overflows horizo

I have a webpage where I put a text into a "pre" tag that is i开发者_JS百科nside a "div" that resizes with the window size. If the "div" is so small that the text in the "pre" overflows horizontally, I want the text to wrap at a word break.

Here is the html that demonstrates the problem:

<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>

This works fine in the versions of Firefox, Safari and Chrome that I've tested, but I get some duplication of text in IE8.

IE8 duplicates text in wrapping <pre> tags