1

我检查了我的 ul li，它们似乎写得正确，但由于某种原因，我的导航菜单中的链接只能在 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;
}
4

2 回答 2

3

我在 jsFiddle 中创建了您网站的这个演示，并在 Safari 中打开它。然后我用 DOM 开发者工具检查了它。

您的div呼叫#slideshow完全覆盖了您的菜单，从而阻止了单击链接的能力。

于 2012-05-01T20:22:57.093 回答
0

相应地更新您的a标签：

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

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

于 2012-05-01T20:07:56.413 回答