Разметка Bootstrap и Microdata для хлебных крошек? Проблема — лишние пробелы

Вот как выглядит разметка 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 и микроразметки для удобства поисковой системы:

<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>

Проблема в том, что если используется последняя разметка, я заметил, что перед каждой ссылкой в ​​хлебной крошке добавляется дополнительный пробел, как показано на скриншоте ниже. То же самое не происходит с исходной разметкой.

Скриншот

Вот соответствующий скрипт JS для того же.

Это не имеет большого значения, но я хотел бы знать основную причину, которую я не смог определить.

PS: Обе разметки добавляют пробел перед каждой ссылкой в ​​навигационной цепочке.


breadcrumbs twitter-bootstrap metadata markup microdata
person its_me    schedule 19.11.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Эти пробелы создаются разрывами строк в HTML.

Связанные вопросы:

person unor    schedule 19.11.2013

arrow_upward
1
arrow_downward

Дочерний атрибут должен быть включен во второй и последующие элементы списка в соответствии с описанием хлебных крошек на странице 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>
person Donald Boulton    schedule 24.12.2014