股利文字看起来不同

第一招：

function DisplayLoadingDiv() { 
    document.getElementById("steamdiv").style.display = ""; 
    var newobj = document.createElement("h1"); 
    newobj.className = "loadingtext"; 
    newobj.innerHTML = "<span>L</span>" + 
     "<span>o</span>" + 
     "<span>a</span>" + 
     "<span>d</span>" + 
     "<span>i</span>" + 
     "<span>n</span>" + 
     "<span>g</span>"; 
    document.getElementById("steamdiv").appendChild(newobj); 
}

第二个：

<button id="steambutton" class="button">Get Phishers</button> 
    <div id="steamdiv"> 
    <h1 class="loadingtext"> 
     <span>L</span> 
     <span>o</span> 
     <span>a</span> 
     <span>d</span> 
     <span>i</span> 
     <span>n</span> 
     <span>g</span> 
    </h1> 
</div>

现在第一个返回文本，但间距非常小。第二个返回相同的文本，但间距要大得多。我在同一浏览器中使用了两个代码，并且间距完全不同。这是为什么发生？

loadingtext是一个自定义加载屏幕，仅使用从here使用的CSS。

来源

2014-11-13 Varun Iyer

哪个浏览器？如果在设置'className'之前设置'innerHtml'，结果是否相同？ – cpacheco

第二个在span元素之间有空白，第一个不是 –

@JamesThorpe空白在哪里？请展示。 –

它可能是因为空白。尝试给font-size:0到h1和所需font-size到span内h1

演示：http://jsfiddle.net/GCu2D/412/

h1{font-size:0} 
h1 span{font-size:24px;}

也有不同的方式来处理空白的问题。在SO上搜索另一个选项。

来源

2014-11-13 16:38:16

修复了这个问题。感谢詹姆斯，我添加了角色

\n

向每个<span>标签，它解决了这一问题。

再次感谢您的帮助！

来源

2014-11-13 16:43:17

股利文字看起来不同

回答

相关问题