IE 缩进两个而不是一个答案

【问题标题】：IE makes two indents instead of oneIE 缩进两个而不是一个
【发布时间】：2021-06-04 04:55:38
【问题描述】：

我有一些实现打字机效果的 JS 代码。但是，如果在 google chrome 上一切正常，那么在 IE 中为什么会出现额外的缩进。

在chrome的控制台中，ie 3中有2个缩进，为什么总是多了一个，这是bug吗？

let textBox = document.querySelector('.index-title-main h1'),
    text    = textBox.innerText,
    newHTML = '';

for(i = 0; i < text.length; i++){
    newHTML += '<span>'+text[i]+'</span>';
}
textBox.innerHTML = newHTML;

let spans   = textBox.querySelectorAll('span'),
    count   = 0,
    timeout = 0;

function typing_text(){
    spans[count].classList.add('visible');
    if(spans[count].innerText == '\n' || spans[count].innerHTML == '\n'){
        timeout = Math.floor(Math.random() * Math.floor(1000));
        spans[count-1].classList.add('cursor');
    
    }else{
        timeout = 150;
    }

    if (count < text.length - 1){
        setTimeout(function() {
            Array.prototype.forEach.call(spans, function (e) {
                e.classList.remove('cursor'); 
             }); 
            count ++;
            typing_text();
        }, timeout);
    }
}

typing_text();

body{
 background-color: #000;
}
.index-title-main{
  color: #fff;
  font-size: 25px;
  height: 290px;
  white-space: pre-wrap;
}
/* Animation */
.index-title-main h1 span {
    visibility: hidden;
}
.index-title-main h1 span.visible {
    visibility: visible;
}
.index-title-main h1 span.cursor {
    background: #34DEB4;
    width: 2px;
    animation: blinking 0.5s step-start infinite;
}

&lt;div class="index-title-main"&gt;&lt;h1&gt;Text 1 &lt;br&gt;Text 2, &lt;br&gt;Text 3&lt;/h1&gt;&lt;/div&gt;

谷歌浏览器：

Internet Explorer 11：

【问题讨论】：

你真的需要支持IE11吗？那东西已经死了。
其他一切都与它兼容。我不希望这样的小事在那里歪歪扭扭地工作。
我的猜测是它可能以不同的方式处理换行符（因为您在其他浏览器中得到\r\n 而不是单个\n），并且由于文本被逐个字符分割并且每一个都包裹在一个跨度中，你现在可能有一个跨度只包含\r ......并且结合white-space: pre，这会导致空行。
您的 sn-p 在 Chrome 和 IE11 上的工作方式相同 - 但看起来都不像您显示的图像。

标签： javascript html css internet-explorer

【解决方案1】：

我赞成 CBroe 的评论。它在 IE 中得到\r\n，这会导致问题。如果你把\r\n替换成\n，那么它在IE和Chrome中都能正常运行。

您可以使用以下方法将\r\n替换为\n：

text = text.replace(/(?:\\[rn]|[\r\n]+)+/g, "\n");

在 IE 11 中的结果：

【讨论】：