字形图标(Halflings & Fontawsome）不显示.纯 html vs use js innerHT

glyph icons (Halflings & Fontawsome) are not displayed consisted. plain html vs use js innerHTML

本文关键字：html 显示 vs use innerHT js Halflings 图标 amp Fontawsome 字形      更新时间：2023-09-26

我遇到了一件奇怪的事情。看到是真的理解，所以我做了一个例子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;

斯菲德尔

首先，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/

相关文章：