Question

我有两个相似的代码：

第一个：

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制作。

Answer 1

可能是因为白色空间。尝试将font-size:0发送至h1，将所需的font-size发送至span内的h1

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

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

处理空白问题的方法也各不相同。在SO上搜索其他选项。

Answer 2

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

\n

对每个<span>代码进行修复，解决了问题。

再次感谢您的帮助！

Div文本看起来不同

2 个答案: