0

Изменю немного вопрос, Не работает в Chrome Версия 27.0.1453.110 m Работает в FireFox 19.0.2 Работает в IE 10, 9, 8 (ниже уже не надо) В других браузерах не проверял, может кто-то встречался с подобным?

html

<div class="menu_header_first">
        <ul>
            <li><a href="#" class="active">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul>
</div>

css

.menu_header_first {
    background-image: url("images/bg/menu_header_bg.png");
    height: 45px;
}

.menu_header_first ul li {
    display: inline-block;
    color: black;
    margin: 6px 25px 0;
}

.menu_header_first ul li a {
    padding: 5px 5px;
    color: #fff;
    font-size: 16px;
    font-family: Arial;
    text-decoration: none;
}

.menu_header_first ul li a.active {
    display: block;
    background-color: #000;
    padding: 5px 5px;
    border-radius: 1.000em;
}

.menu_header_first a:hover {
    display: block;
    background-color: #000;
    padding: 5px;
    border-radius: 15px;
}
2
  • «.menu_header_first ul li a» — каскад это плохо, познакомтесть с БЕМ. Максимальный каскад, который я себе позволяю — один уровень. Тобишь, можно написать «.menu_header_first ul {…}», «.menu_header_first li {…}», «.menu_header_first a {…}», но если каскад двух- и более уровневый, то нужно вводить дополнительные классы, а не строчить что-то вроде «.menu_header_first ul li ul a {…}» (задаем стиль для ссылок на втором уровне меню, например) и прочий ад.
    – artuska
    14 июн 2013 в 16:59
  • БЕМ (который вообще-то БЭМ) - это не догма и не то, чем пользуются все. Не надо придираться к структуре вместо ответа на вопрос. 1 июл 2015 в 6:06

3 ответа 3

0

Может быть я что-то не так понял ...?

Посмотрите здесь.

2
  • Странно( Теперь я вообще не понимаю, почему(
    – Stee1House
    13 июн 2013 в 7:39
  • Спасибо, оказалось причина не в этом, не хватало свойства display:block. Теперь всё заработало как надо было)
    – Stee1House
    13 июн 2013 в 8:13
0

Не юзайте inline-block в менюшках. Лучше float: left;

5
  • Аргументы?
    – Bars
    14 июн 2013 в 16:30
  • 1
    inline-block не кроссбраузерный. это css3. Для ИЕ8 и меньше нужно дописывать дополнительные стили, типа *display: block; и zoom: 1; Зачем этот гемор, если с флоатом все прекрасно работает. display: inline-block нужно юзать в других ситуациях, например список товаров в категории отобразить. Вот там связка display: inline-block + vertical-align: top будет идеальной. Плюс для ишаков дописать *display: block; и zoom: 1;
    – mountpoint
    14 июн 2013 в 16:43
  • Ну почему же — css3? Если верить, IE8 вполне хорошо понимает. За остальное — спасибо.
    – Bars
    14 июн 2013 в 17:10
  • сори, ошибся. но в данной ситуации его лучше не использовать
    – mountpoint
    14 июн 2013 в 17:37
  • Единственный недостаток inline-block - это пробелы между элементами. float: left; же себя ведет просто ужасно если элементы разные по высоте! 1 июл 2015 в 6:11
-1

hover не будет работать, например, для label если метка относиться к радио-кнопке, которую нужно стилизовать и мы кнопку сделаем display:none; часто нужно, чтоб стилизовать радио-кнопку. Вот пример.

<input id="r_1" type="radio" value="2" name="gbvote" style="display:none;"><label for="r_1">текст для радиокнопки</label>

В итоге, в хроме не работает hover, а вот в файрфоксе все отлично господам из хрома стоило бы поучиться у файрокса в нем всегда меньше багов решение задать ширину и высоту радиокнопке = 0 вместо display:none;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.