размещение изображений для исправления ошибок IE - PullRequest
Новая
       29

размещение изображений для исправления ошибок IE

2 голосов
/ 21 июля 2009

Привет, у меня есть меню, которое выглядит так: 

<li id="selected"><a href="http://www."><p>FAQ'S</p></a></li>

Мне удалось добиться желаемого эффекта в Firefox, но затем я проверил его в IE 7 и phwoooar ... Кажется, это проблема ширины в начале, я пытаюсь воспрепятствовать взлому ширины, но затем это расстраивает firefox: 

#menu li#selected { padding: 0; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px;  }

#menu #selected a {background:url(nav-tab-right.gif) bottom right no-repeat;height: 25px;}
#menu #selected p { padding: 0 10px; margin:4px; }

Другая проблема в том, что изображение справа выглядит выше, чем изображение слева, бла!

Ответы [ 2 ]

1 голос
/ 21 июля 2009

Вы не можете иметь <p> - элемент уровня блока - внутри <a> - встроенный элемент. Он будет некорректно отображаться различными браузерами.

Попробуйте изменить на 

<li id="selected"><p><a href="http://www.">FAQ'S</a></p></li>

Проблема с изображением заключается в том, что свойство высоты не применяется к встроенным элементам, поэтому ваш рост: 25 пикселей игнорируется. Переместите изображение на место с отступом. 

#menu #selected a 
background:transparent url(nav-tab-right.gif) no-repeat scroll right bottom;
padding-bottom:16px;
}
0 голосов
/ 21 июля 2009

<p> является элементом уровня блока. Вы не можете поместить его внутрь встроенного элемента (<a>). Вы можете сделать следующее: просто удалите <p>, а затем используйте CSS, чтобы отобразить тег <a> в виде блока.

HTML: 

<li id="selected"><a href="http://www.">FAQ'S</a></li>

CSS: 

#menu li#selected {
  padding: 0;
  margin:0;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

Это будет работать во всех браузерах и не захламляет разметку ненужными элементами.

Вариация при наведении курсора

Еще одним преимуществом использования этого метода является то, что вы можете немного изменить его, чтобы разрешить использование CSS-роликов, которые будут совместимы с IE6 как таковые:

HTML: 

<li id="selected"><a href="http://www."><span>FAQ'S<span></a></li>

CSS: 

#menu li#selected {
  padding: 0;
  margin:0;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
  padding: 0;
  margin: 0;
}

#menu #selected a span {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

/* Hovered, so let's change the colors and the images */
#menu #selected a:hover {
  background:url(nav-tab-left-hover.gif) bottom left no-repeat #902B27;
}

#menu #selected a:hover span {
  background:url(nav-tab-right-hover.gif) bottom right no-repeat;
}

Да, он работает в IE6 и ниже (и выше), поскольку a - единственный элемент, для которого IE6 поддерживает псевдокласс :hover. Это также причина, по которой этот метод требует добавления дополнительного тега <span>, поскольку мы не можем нацелить <li> с помощью :hover способом, понятным IE6.

Я рекомендую использовать CSS-спрайты вместо отдельных изображений для эффекта наведения, но чтобы этот пример был как можно более простым, я оставлю его таким.

Для получения дополнительной информации о поддержке селекторов CSS см. CSS - Содержание и совместимость .

...