0

我正在尝试使用图像创建导航菜单。即使 Chrome 和 Firefox 没有问题，这些链接在 IE9 中也不起作用。悬停效果也不起作用。

看看我在www.sabourinpaulwedding.ca上得到了什么

提前致谢。吉尔斯

HTML 是左侧的垂直导航栏和右侧的内容 div。

<div>
  <ul class="nav">
    <li class="welcome"><a class="selected" href="#"></a></li>
    <li class="ceremony"><a href="ceremony.html"></a></li>
    <li class="reception"><a href="reception.html"></a></li>
    <li class="accommodations"><a href="accommodations.html"></a></li>
    <li class="registry"><a href="registry.html"></a></li>
  </ul>
</div>
<div class="content">
  <p>Welcome to the digital home of the future Mr. and Mrs. Paul.</p>
  <p>&nbsp;</p>
</div>

CSS 使用图像来显示悬停的链接和选定的链接。似乎 IE 无法访问导航栏，因为顶部有一个“不可见”的 div。我玩了导航栏的 z-index。那没有用。

ul.nav
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    z-index: 20;
}

ul.nav a
{
    border: 0px solid #cccccc;
    display: block;
    height: 0px;
    padding-top: 72px;
    width: 265px;
    overflow: hidden;
}

/* Welcome Button */
.nav li.welcome a { background:url('images/welcome_en_normal.png') no-repeat; background-position:0px 0px; }
.nav li.welcome a:hover { background:url('images/welcome_en_hover.png') no-repeat; background-position:0px 0px; }
.nav li.welcome a.selected { background:url('images/welcome_en_selected.png') no-repeat; background-position:0px 0px; }

/* Ceremony Button */
.nav li.ceremony a { background:url('images/ceremony_en_normal.png') no-repeat; background-position:0px 0px; }
.nav li.ceremony a:hover { background:url('images/ceremony_en_hover.png') no-repeat; background-position:0px 0px; }
.nav li.ceremony a.selected { background:url('images/ceremony_en_selected.png') no-repeat; background-position:0px 0px; }

虽然有效的是从内容方面删除所有 p 标签......但我确实需要一些内容（显然）。问题不在于 css .p 选择器，因为如果我删除其中的所有内容，链接仍然无法工作。

4

1 回答 1

0

这可能是因为标签是空的试试这个标记

<ul class="nav">
    <li class="welcome"><a href="#" class="selected">Welcome</a></li>
    <li class="ceremony"><a href="ceremony.html">Ceremony</a></li>
    <li class="reception"><a href="reception.html">Reception</a></li>
    <li class="accommodations"><a href="accommodations.html">Accomodations</a></li>
    <li class="registry"><a href="registry.html">Registry</a></li>
  </ul>

和 CSS

ul.nav a {
    border: 0 solid #CCCCCC;
    display: block;
    height:0;
    padding-top: 72px;
    width: 265px;
    overflow:hidden;
}

具有对 SEO 友好的副作用作为奖励

于 2013-04-13T02:18:44.283 回答