0

我有以下 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 之间有一个空行（见图）

样本

这仅在 IE 中，并且仅在完整的 IE9 标准模式下。

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

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

4

1 回答 1

0

这一定是某种 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。

于 2013-08-14T14:36:24.660 回答