Question

我正在尝试使用图片创建导航菜单。即使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选择器中，因为如果删除其中的所有内容，链接仍然无效。

Answer 1

可能是因为标签是空的尝试此标记

<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友好作为奖励的副作用

图像链接和悬停在ie中不起作用

1 个答案: