VPF::display:inline-block и webkit - Форум программистов

localhost

Дата 13.2.2013, 13:20 (ссылка)

(нет голосов)

Загрузка ...

Хирург-длятехкт

Профиль
Группа: Участник
Сообщений: 712
Регистрация: 8.11.2005
Где: Н.Новгород

Репутация: нет
Всего: 43

Всем хорошего настроения!
Дано: иерархическое меню (вертикальное)

Код


<div class="sf-left">
    <ul class="sf-left">
        <li class="active first">
            <a href="#">Cырье</a>
            <ul class="sub">
                <li class="normal"><a href="#">Сырье для A</a></li>
                <li class="normal"><a href="#">Сырье для B</a></li>
                <li class="active"><a href="#">Сырье для C</a></li>
                    <ul class="sub">
                        <li class="normal"><a href="#">Добавки для C</a></li>
                        <li class="normal"><a href="#">Присадки для C</a></li>
                        <li class="normal"><a href="#">Еще что-то для C</a></li>
                    </ul>
                </li></ul>
        </li>
        <li class="normal"><a href="#">Продукция</a>
            <ul class="sub">
                <li class="normal"><a href="#">Продукция A</a></li>
                <li class="normal"><a href="#">Продукция B</a>
                    <ul class="sub">
                        <li class="normal"><a href="#">Группа продукции 1</a></li>
                        <li class="normal"><a href="#">Группа продукции 2</a></li>
                        <li class="normal"><a href="#">Группа продукции 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
</div>

ну и т.д.

Активные элементы списка я показываю раскрытыми, неактивные - скрываю

Код


ul li.normal > ul {
    display: none;
}

Проблема в том, что когда список раскрыт, его дочерние элементы в Webkit браузерах "подползают" под пункты верхнего уровня так, как будто бы их нет. В FF, IE все работает правильно. Изначально я для такого отображения использовал

Код


ul, li, a {
    display:inline-block;
}

но, как выясняется, webkit не хочет адекватно работать с display:inline-block. Может есть кроссбраузерное решение моей задачи?

--------------------

ВСЕ Нижегородцы! Отмечаемся здесь!!!
Jabber ID: [email protected]

user posted image

Gold Dragon

Дата 14.2.2013, 06:20 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

через jQuery например

Код


$("ul li.normal > ul").click().show();
//...
$("ul li.normal > ul").click().hide();

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

ksnk

Дата 14.2.2013, 10:03 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

localhost, Без примера это все сложно себе вообразить. Нельзя ли сбросить на jsfiddle пример верстки?
Google Сhrome - это webkit броузер?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

SiteVizitka

Дата 9.3.2013, 20:32 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 24.6.2012

Репутация: нет
Всего: нет

Ничего не понял, но display:inline-block; это не сокрытие, для сокрытия display: none;
http://htmlbook.ru/css/display

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »