Question

我遇到了一件奇怪的事情。要看是真的要理解，所以我做了一个例子jsfiddle。我有一个带有图标的html列表。一个列表呈现为普通html。另一个完全相同的列表附加了javascript。尽管元素完全相同，但css是相同的。其中一个具有右（和左）间距而另一个没有。我玩了标记高度，宽度和元素类型，但似乎没有任何东西让他们正确。谁知道我错过了什么以及为什么会这样。以及如何以一致的方式使用图标？

标记（请参阅css和其他图标集的小提琴）

<div id="content1">
    <ul class="list-horizontal">
        <i class="fa fa-bars"></i>
        <li> 
            <a href="#">A new thing</a>
        </li>
    </ul>
</div>
<div id="content2"></div>

/* string is the same as markup above */
var stringAwsome = '<ul class="list-horizontal"><i class="fa fa-bars"></i><li><a href="#">A new thing</a></li></ul>';
var div = document.getElementById('content2');
div.innerHTML = div.innerHTML + stringAwsome;

jsfiddle

Answer 1

首先，i不能是ul的直接孩子，只有li才可以。它没有引起您所看到的问题，但我仍然认为您应该解决这个问题。

真正的问题是您没有使用javascript插入完全相同的代码。

此

<ul class="list-horizontal">
    <i class="fa fa-bars"></i>
    <li> 
        <a href="#">A new thing</a>
    </li>
</ul>

与此

不同

<ul class="list-horizontal"><i class="fa fa-bars"></i><li><a href="#">A new thing</a></li></ul>

i和a都是内联元素，因此所有空格（制表符，空格，换行符）都将折叠并呈现为单个空格。使用javascript注入的代码没有空格，因此您没有看到标记中的空格。

看看更新的小提琴，我从标记中删除了空格（并修复了无效的html）： http://jsfiddle.net/kb3gN/8734/

字形图标（Halflings＆amp; Fontawsome）不显示。普通的html vs使用js innerHTML

1 个答案: