Проблемы с парением CSS в Chrome и IE8 - PullRequest
Новая
       7

Проблемы с парением CSS в Chrome и IE8

2 голосов
/ 02 мая 2011

У меня проблемы с кросс-браузерной совместимостью.

У меня есть простое меню (со всеми функциями JS, удаленными для целей этой демонстрации).Фон ссылок должен становиться оранжевым при наведении на них.

  • Firefox (V3.6.17): работает правильно.
  • Chrome (V11.0.696.60): MainСсылки расширяются с :hover, сдвигая все остальные пункты меню.Я думаю, что отступы или поля расширяются при наведении курсора
  • InternetExplorer (V8): ссылки отображаются синим цветом, несмотря на определение цвета.

Я думаю, что проблема легко может быть распознана кем-то, ктохорошо знает CSS, но мои знания не на пустом месте.Объяснение будет с благодарностью!

Вот код на JS Fiddle

Вот часть CSS: 

#mainlinks  {
    position:absolute;
    display:block;
    overflow:visible;
    margin:0px;
    padding:0px;
}

#mainlinks li {
    display:block;
    position:relative;
    float: left;
    cursor:pointer;
    overflow:hidden;
    padding:4px;
    margin:45px 3px 2px 3px;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size: 14px;
    text-decoration:none;
    list-style: none;
}

#mainlinks li :visited {
    text-decoration:none;
    color:#000;
    padding:4px;
    margin:45px 3px 2px 3px;
}

#mainlinks li :hover {
    text-decoration:none;
    color:#FFF;
    padding:4px;
    margin:45px 3px 2px 3px;
    background-color:#f1592a;
}

Ответы [ 2 ]

1 голос
/ 02 мая 2011

вам следует попробовать применить стили, специфичные для текста (например, цвет), к тегу 'a' вместо LI

1 голос
/ 02 мая 2011

попробуйте li:hover вместо li :hover, li:visited вместо li :visited

надеюсь, что это сработает ^^

...