код для выделения текущей страницы с помощью CSS не работает на IE - PullRequest
Новая
       3

код для выделения текущей страницы с помощью CSS не работает на IE

1 голос
/ 23 октября 2010

следующий код для выделения текущей страницы отлично работает в FF, но с IE не повезло.

Есть ли известный взлом? Я немного погуглил, но ничего не смог найти. 

.navigation a:link {color: #FFFF00; text-decoration:none;}
.navigation a:visited {color:#000000; text-decoration:none}
.navigation a:hover {color:#c1753e; text-decoration:none}  
.navigation a:active {color:#000000; text-decoration:none;} 

body#homepage a#home,
body#gallery a#gallery,
body#biography a#biography,
body#exhibitions a#exhibitions,
body#contact #acontact
{
color: #000000;
}

соответствующий HTML: 

<body id="homepage">

        <ul>
        <li><a href="index.html" id="home">Home</a></li>
        <li><a href="gallery.html" id="gallery">Gallery</a></li>
        <li><a href="biography.html" id="biography">About the artist</a></li>
        <li><a href="exhibitions.html" id="exhibitions">Exhibitions</a></li>
        <li><a href="contact.html" id="contact">Contact</a></li>
        </ul>

...

Ответы [ 5 ]

1 голос
/ 23 октября 2010

Существует несколько проблем:

  1. В документе не может быть двух элементов с одинаковым идентификатором, поэтому большинство ваших селекторов никогда не совпадут с чем-либо в действительном документе HTML (и недействительных документах).вызывать исправление ошибок различными способами в разных браузерах)
  2. Текущая ссылка и все :visited ссылки черные, так как бы вы заметили разницу?
  3. #acontact должно быть a#contact(кроме упомянутой выше проблемы с дублирующимся идентификатором)
0 голосов
/ 23 октября 2010

Подобная техника определенно должна работать во всех браузерах. Однако, как вам уже сказали, вы не можете иметь один и тот же идентификатор дважды на одной странице.

Способ обойти это просто: просто используйте одинаковые идентификаторы в теле и меню, а не идентичные. В технике нет ничего, что требовало бы идентичных идентификаторов.

0 голосов
/ 23 октября 2010

У вас нет ничего с классом navigation , поэтому селекторы вверху ничего не вносят в стиль страницы, и вы дублируете идентификаторы.Измените идентификаторы на классы или переименуйте идентификаторы в теле на что-то другое, например страницу галереи, страницу биографии и т. Д.

Учитывая, что вы специально вызываете IE, вы можете столкнуться с трудностями, если меняете идентификатортега body на теге body во время выполнения с помощью Javascript.IE может испытывать трудности при распознавании изменений стиля дочерних элементов при изменении класса родительского элемента.Изменение чего-либо в дочерних элементах заставит IE распознать это изменение.Например, вы можете добавить фиктивный класс ко всем элементам, которые будут затронуты.

Если вы идете так далеко, вы можете просто добавить стиль .current и добавить класс к соответствующей ссылке.Конечно, вам нужно будет удалить текущий класс из всех других навигационных ссылок.

Вы также можете изменить стиль на что-то более очевидное, например, включить границу, чтобы помочьв отладке, так как существуют другие проблемы с вашими стилями, и простое изменение цвета на черный, вероятно, будет незаметно (особенно, если вы заставите работать .navigation правила).

0 голосов
/ 23 октября 2010

Вы бы сделали что-то вроде этого: 

body.homepage a.homepage {
    color:red;
}

Для каждой из этих ссылок в вашей навигации.

Тем не менее, я добавил бы «активный» класс через код на стороне сервера вместо имени класса активного элемента ссылки -> менее подробный CSS.

0 голосов
/ 23 октября 2010

это может быть этот селектор?: 

.navigation a:link {color: #FFFF00; text-decoration:none;}

Честно говоря, я никогда не использовал его. Если у вас просто есть статические страницы, лучше всего добавить класс .current на страницу, на которой вы находитесь, и все готово.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...