2

嗨，我有一个这样的菜单：

<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; }

ie 中的另一个问题是右边的图像似乎比左边的图像挂得更高等等！

4

2 回答 2

1

您不能在内部拥有<p>- 块级元素 - 内<a>联元素。它将被不同的浏览器不一致地呈现。

尝试更改为

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

图像问题是因为 height 属性不适用于内联元素，因此您的 height:25px 被忽略。使用填充将图像移动到位。

#menu #selected a 
background:transparent url(nav-tab-right.gif) no-repeat scroll right bottom;
padding-bottom:16px;
}
于 2009-07-21T14:27:08.787 回答
0

<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;
}

这将适用于所有浏览器，并且不会用无用的元素混淆您的标记。

悬停变化

使用此方法的另一个优点是您可以稍微修改它以允许与 IE6 兼容的 CSS 翻转图像，如下所示：

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>标签的原因，因为我们无法以 IE6 理解的方式定位<li>with :hover。

我确实建议使用CSS 精灵而不是单独的图像来实现悬停效果，但为了使这个示例尽可能简单，我将保持原样。

有关 CSS 选择器支持的更多信息，请参阅CSS - 内容和兼容性。

于 2009-07-21T14:50:43.457 回答