Блог

Я использую выпадающие меню с моими основными навигационными ссылками, и мне нужно добавить тень в один пиксель вокруг всего (текущей навигационной кнопки / ссылки (которая имеет закругленные углы с использованием border-radius) и всего выпадающего элемента вспомогательной навигации).).

Я опубликовал демонстрацию этого на JSFiddle:

http://jsfiddle.net/thebluehorse/TFqjR/2/

Может кто-нибудь обновить его или подсказать мне, что сделать, чтобы при переходе по навигационной ссылке вокруг всего была отбрасываемая тень в один пиксель? Обратите внимание, что он должен огибать закругленные углы в главной навигационной системе. Он должен поддерживать IE7 , но я думаю, что если используется box-shadow, то CSS3 Pie можно использовать в качестве вспомогательного средства.

Будем признательны за любую помощь. Эта штука сводит меня с ума.

Существует несколько способов достичь вашей цели. Самый простой — установить статический класс для ваших вложенных ul элементов. Это связано с тем, что они видны только тогда, когда они запускаются родительским событием наведения курсора мыши. Пример: http://jsfiddle.net/deloretta/gspnK / (примечание: чтобы текст внутри родительского элемента не «прыгал», вы могли бы попробовать добавить к элементу отступ размером 1 пиксель и удалить его при наведении курсора мыши, или выровнять текст по центру, или любым другим способом, который вам нравится).

Во-вторых, более неэффективным способом (но имеющим свои применения, о которых я не буду здесь распространяться) вы можете выяснить, есть ли у этого элемента дочерние элементы, и применить к ним класс следующим образом: http://jsfiddle.net/deloretta/XVrr6 /

В идеале стили IE7 должны находиться в их собственной таблице стилей (поскольку IE7 поддерживает !important синтаксис), и вы могли бы получить к ним доступ с помощью условных комментариев. В принципе, удалите border свойства и поместите их в таблицу стилей, специфичную для IE. IE проигнорирует объявления -moz- и -webkit- и правильно отобразит border свойства, в то время как moz / webkit проигнорирует условные комментарии и отобразит тень окна. Прекрасный jubbly.

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ — ответ на ваш первоначальный комментарий:

Я думаю, что понял ваш комментарий. Если нет, дайте мне знать, и я постараюсь помочь в дальнейшем.

Чтобы это работало с условными комментариями, вы должны разделить два стиля. Один специфичен для IE, а другой для всех других браузеров. Вы можете сделать это следующим образом:

 <link rel="stylesheet" type="text/css" href="/style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/style_ie.css"> 
<![endif]-->
  

Затем вам следует изменить существующую таблицу стилей, чтобы она содержала эту информацию:

 #nav #link1.selected > a {
  padding-bottom: 10px;
  margin-bottom: 0;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  /*the border declaration used to be here
  but we moved to another stylesheet
  specifically for IE*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}
.static_class{
  /*border used to be here*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}
  

Затем создайте отдельную таблицу стилей под названием styles_ie.css — в ней будет размещена информация о границах, которую мы удалили из другой таблицы стилей. Вот так:

 #nav #link1.selected > a {
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}
.static_class{
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}
  

Итак… Что происходит?

Internet Explorer — единственный браузер, который поддерживает условные комментарии. Поэтому, когда Firefox, Safari или Chrome попадают на страницу, они игнорируют комментарии и, следовательно, не отображают таблицу стилей, связанную в комментариях.
Когда Internet Explorer попадает на страницу, он отображает все, что понимает из styles.css — игнорируя свойства border-radius и box-shadow и так далее (потому что он их не понимает). Затем он переходит к условным комментариям (которые он понимает), затем загружает таблицу стилей styles_ie.css и затем применяет дополнительный стиль к элементам. Проще простого, как выжатый лимон :]