Question

这就是Twitter Bootstrap的痕迹标记的标记：

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

结合Twitter Bootstrap和Microdata标记，使面包屑搜索引擎友好：

<ol class="breadcrumb">
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Home</span>
        </a>
    </li>
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Library</span>
        </a>
    </li>
    <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Data</span>
        </a>
    </li>
</ol>

问题是，如果使用后一个标记，我注意到在面包屑中的每个链接之前添加了额外的空间，如下面的屏幕截图所示。原始标记也不会发生同样的情况。

Screenshot

Here's the related JS Fiddle for the same

这不是什么大问题，但我想知道我无法识别的潜在原因。

PS：两个标记都会在面包屑中的每个链接之前添加一个空格。

Answer 1

这些空格是由HTML中的换行符创建的。

相关问题：

Answer 2

根据Data-Vocabulary.org处的面包屑说明，子属性需要包含在第二个和后续列表项中并在Google Rich snippets - Breadcrumbs

详细说明

<ol> gives me style issues in Orchard CMS front end I use <ul> or use <div>与Google相同，例如。

始终关闭itemscope作为itemscope =“itemscope”。

<ul>
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Home</span>
        </a>
    </li>
    <li itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Library</span>
        </a>
    </li>
    <li itemprop="child" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url">
            <span itemprop="title">Data</span>
        </a>
    </li>
</ul>

面包屑的Bootstrap和Microdata标记？问题 - 额外空间

2 个答案: