Почему мое меню категорий HTML перемещается вправо при расширении подкатегорий? - PullRequest
Новая
       14

Почему мое меню категорий HTML перемещается вправо при расширении подкатегорий?

0 голосов
/ 16 февраля 2012

Я использую аккордеонный виджет jQueryUI для обеспечения нужной мне функциональности. Я не очень хорошо знаком с IE, поэтому решение ускользает от меня.

Если вы посетите мой тестовый сайт , попробуйте расширить категории с помощью современного браузера, такого как Firefox, Opera или Chrome. Работает как задумано.

Однако при использовании IE8 дерево категорий немного смещается влево, и между самими категориями существует еще большее разделение.

Что я могу сделать, чтобы исправить это плохое поведение?

( Примечание: забудьте о поддержке IE6,7, он просто должен работать, а не выглядеть красиво. )

Ответы [ 2 ]

1 голос
/ 16 февраля 2012

У вас плохо сформированная разметка HTML5. Это может не помочь. Количество элементов списка у вас очень длинное, поэтому я просто приведу фрагмент кода. 

<div class="widget-box">
    <h1>MENÚ PRODUCTOS</h1>
    <div class="content">
        <div class="categories">
            <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/66">CCTV</a><p class="subtext">Circuito cerrado de televisi&#243;n </p></h3>
            <div>
                <ul>
                    <div class="categories">
                        <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/74">Camaras</a><p class="subtext"></p></h3>
                        <div>
                            <ul>
                                <div class="categories">
                                    <h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3>
                                    <div>
                                        <ul></ul>
                                    </div>
                                </div>
                                <div class="categories">
                                    <h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3>
                                    <div>
                                        <ul></ul>
                                    </div>
                                </div>

В 7-й и 11-й строке выше у вас есть теги UL, но затем переходите к использованию тегов DIV. У тегов UL могут быть только элементы LI как дочерние для W3. http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html

Я думаю, ваш HTML может быть ближе к этому: 

<div class="widget-box">
    <h1>MENÚ PRODUCTOS</h1>
    <div class="content">
        <ul>
        <li>
            <h3><a href="#">CCTV <b>Circuito cerrado de televisi&#243;n</b></a></h3>
            <ul>
            <li>
                <h3><a href="#">Camaras</a></h3>
                <ul>
                <li><a href="#">Camaras Infrarrojas</a></li>
                <li><a href="#">Profesional</a></li>
                </ul>
            </li>

Хотя, возможно, семантическое использование тегов возможно лучше, чем у меня здесь.

Затем вы можете добавить небольшой отступ слева от тега H3> и использовать +/- gif в качестве фонового изображения, которое можно поменять местами с помощью класса CSS. Это сделает обмен прямо в jQuery простым переключением класса привязанного якоря. Это поможет решить предыдущую ошибку, о которой я упоминал.

Надеюсь, это немного поможет, поскольку у Юселя, похоже, есть решение для другой проблемы, но с проблемами HTML может быть больше.

ура!

1 голос
/ 16 февраля 2012

удалить ширину из класса категорий, попробовал в ie8 и проблема исчезла

...