IE 使两个缩进而不是一个

Question

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

在chrome的console里面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;
}

<div class="index-title-main"><h1>Text 1 <br>Text 2, <br>Text 3</h1></div>

Google Chrome:

Internet 浏览器 11：

Answer 1

我赞成 CBroe 的评论。它在 IE 中得到 \r\n，这导致了问题。如果你把\r\n换成\n，那么它在IE和Chrome.

中都能正常工作

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

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

IE 11 中的结果：

IE 使两个缩进而不是一个

IE makes two indents instead of one

html

javascript

css

internet-explorer