Question

我有以下HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        tr{vertical-align: top;}
    </style>
    <script type="text/javascript">
            function ready() {
                s = '';
                t = '';
                for(var i=1; i<=450; ++i)
                {
                    s += i + '\n';
                    t += i + '\r\n';
                }

                document.getElementById("numbers1").innerHTML = "<pre><code>"+s+"</code></pre>";
                document.getElementById("numbers2").innerHTML = "<pre><code>"+t+"</code></pre>";
            }
        </script>
    </head>
    <body>
        <table id="wrap"><tr>
            <td id="numbers1"></td>
            <td id="numbers2"></td>
        </tr></table>
    </body>
    <script type="text/javascript">
        ready();
    </script>
</html>

在IE9中，当以IE9标准模式（上述HTML的默认模式）呈现时，右侧列中的数字428和429之间有一个空行（见图）

sample

这仅适用于IE，仅适用于完整的IE9标准模式。

任何人都能解释这种奇怪的行为吗？为什么只在那条线？如果它是每一行，我可以理解它显示\r\n为2个换行符。

这是小提琴http://jsfiddle.net/K2SUU/

Answer 1

这必须是某种IE9渲染错误，与你设置innerHTML的方式有关。如果我将<pre><code>包装器移动到HTML并仅使用innerHTML来设置文本，问题就会消失：

<table id="wrap"><tr>
    <td><pre><code id="numbers1"></code></pre></td>
    <td><pre><code id="numbers2"></code></pre></td>
</tr></table>

...

document.getElementById("numbers1").innerHTML = s;
document.getElementById("numbers2").innerHTML = t;

http://jsfiddle.net/K2SUU/1/

你是对的，但它确实似乎无法解释。对您的问题的评论表明它只发生在IE9的特定版本中。根据“关于Internet Explorer”对话框，我的是9.0.8112.16421。

<pre> in IE9</pre>中无法解释的额外行

1 个答案: