Question

我已经检查了我的ul li's并且它们似乎写得正确但是由于某种原因我的导航菜单中的链接只能在firefox中运行而不是在safari中。我对CSS很新，如果我有格式，我也很抱歉这里错误地输入代码，这是我第一次询问。谢谢！

这是我的HTML

<div id="container"> <a href="index.html"><img id="logo" src="img/yupi.png" width="300" /></a>

<div id="navigation">

<ul> 
<li> <a href="http://www.facebook.com"> Home </a> </li>
<li> <a href="about.html"> About </a> </li>
<li> <a href="products.html"> Products </a> </li>
<li> <a href="contact.html"> Contact </a> </li>
</ul>
</div>
<div class="clear">
</div>
<div id="slideshow">
<div class="active">
    <img src="img/city1.jpg" alt="Slideshow Image 1" />
   </div>

<div>
    <img src="img/city2.jpg" alt="Slideshow Image 2" />

</div>

<div>
    <img src="img/city3.jpg" alt="Slideshow Image 3" />

</div>

<div>
    <img src="img/city4.jpg" alt="Slideshow Image 4" />

</div>

这是我的css

* {margin:0px;
padding:0px;
}
body {background-color:#00457D;
}
#container {
height:1000px;
width:1100px;
background-color:#FFF;
margin:0px auto;
-moz-box-shadow: 0 0 10px 3px #272727;
-webkit-box-shadow: 0 0 10px 3px #272727;
}
#logo {
padding-left:20px;
padding-top:50px;
}
#navigation { width:500px;
font-family:'Josefin Sans', Sans Serif;
font-size:25px;
margin-left:690px;
margin-top:-40px;
}
#navigation ul { list-style-type:none;
}
#navigation ul li {
border-right:solid #9C9E9F 1px;
float:left;
padding:0px 10px 0px 10px;
}
#navigation ul li a {
text-decoration:none;
color:#9C9E9F;
}
#navigation ul li a:hover {
color:#00457D;
}
#navigation li:last-child {
border-right:none;
}
.clear { clear:both;
}
#slideshow {
position:relative;
height:450px;
width:1100px;
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 100%;
width:100%;
background-color: #000;
margin-left:0px;
margin-top:50px;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 450px;
width:1100px;
display: block;
border: 0;
margin-bottom: 10px;
}

Answer 1

我创建了this demo of your site in jsFiddle并在Safari中打开了它。然后我用DOM开发人员工具检查了它。

div名为#slideshow的{{1}}完全覆盖了您的菜单，从而无法点击链接。

Answer 2

相应地更新a代码：

#navigation ul li a {
text-decoration:none;
color:#9C9E9F;
display:block;
}

浮动li你正在折叠它的高度。这应该可以解决问题。您还可以向a样式规则添加填充，以确保鼠标转换为指针而不仅仅是文本。

导航链接在Firefox中工作但不是safari

2 个答案: