Добавление дополнительных якорей в firefox

Question

Я использую FF8 на Linux Mint, и я создал меню навигации, используя элементы списка. Похоже, что в конце элементов моего списка появляются дополнительные якоря, из-за чего мой селектор CSS «.iconSelect ul li: last-child» по какой-то причине ломается!

Если я удаляю лишние якоря с помощью firebug, он работает и применяется стиль.

Моя разметка

<div class="iconSelect">
    <ul>
        <li class="abc">
            <div>
                <a href="#"><img src="./img/user_32x32.png"><a/>
            </div>
            <div class="iconName">tes</div>
        </li>

        <li class="mid">
            <div>
                <a href="#"><img src="./img/buildings_32x32.png"><a/>
            </div>
            <div class="iconName">Organisationfsdfsd</div>
        </li>

        <li class="xyz">
            <div>
                <a href="#">
                    <img src="./img/anchor_32x32.png">
                    <a/>
            </div>
            <div class="iconName">Vessel</div>
        </lI>
    </ul>
</div>

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

Answer 1

Вы закрываете якорь следующим образом:

</a>

не

<a/>

Исправьте это, и ваши проблемы исчезнут, как по волшебству.Firefox, кажется, создает недостающие элементы для вас !!

Answer 2

Ваши закрывающие анкеры неверны:

<a href="#"><img src="./img/buildings_32x32.png"><a/>
                                                  ^^---backwards

они должны быть </a>.По сути, у вас есть ДВА открытых тега, и НЕТ закрывающих тегов.FF вежлив и автоматически закрывает их для вас в программе просмотра.

Answer 3

Вы используете <a/> вместо </a> ...

Также в будущем вы можете захотеть запустить HTML через валидатор HTML, прежде чем публиковать подобные вопросы.