0

我正在使用带有主导航链接的下拉菜单，并且需要在所有内容（当前导航按钮/链接（使用边框半径具有圆角）和整个子导航元素周围添加一个像素的阴影向下）。

我在 JSFiddle 上发布了一个演示：

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

当悬停在导航链接上时，有人可以更新它吗？或者我该怎么做才能使它在所有东西周围都有一个像素的阴影？请注意，它需要绕过主导航中的圆角。它需要支持 IE7+，但我猜如果使用 box-shadow 则 CSS3 Pie 可以用作助手。

任何帮助将不胜感激。这件事一直让我发疯。

4

1 回答 1

1

有多种方法可以实现您的目标。最简单的方法是为嵌套ul元素设置一个静态类。这是因为它们只有在被父级的悬停事件触发时才可见。示例： http: //jsfiddle.net/deloretta/gspnK/（注意：为了防止父元素内的文本“跳跃”，您可以尝试向元素添加 1px 的填充并在悬停或对齐时将其移除文本集中，或任何你喜欢的方法）。

其次，更低效的方式（但有它的用途，我不会在这里介绍）你可以找出这个元素是否有子元素并将类应用于它们，如下所示：http: //jsfiddle.net/deloretta/XVrr6/

理想情况下，IE7+ 样式将驻留在它们自己的样式表中（因为 IE7+ 支持!important语法），您可以使用条件注释访问它们。基本上，去掉border属性并将它们放入 IE 特定的样式表中。IE 将忽略-moz-and-webkit-声明并border正确呈现属性，而 moz/webkit 忽略条件注释并呈现框阴影。可爱的欢快。

希望这可以帮助！

编辑 - 回复您最初的评论：

我想我理解你的评论。如果没有，请告诉我，我会尽力提供帮助。

要使用条件注释进行此操作，您应该将两种样式分开。一种特定于 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，然后将额外的样式应用于元素。易peasy，柠檬汁：]

于 2011-04-26T05:49:30.680 回答