我在div内部有一个链接浮动到屏幕右侧.该链接在FF或Chrome中不起作用,但在IE中工作(仅使用IE8进行测试).
最简单的示例如下所示:
<html>
<head>
<title>test</title>
<style type="text/css">
#logo {
left:10px;
float:left;
top:10px;
}
#feedback {
float: right;
}
ul#menu
{
position:relative;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li.last {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="page">
<div id="header">
<div id="logo">logo</div>
<div id="feedback"><a href="http://www.norge.no">test link</a></div>
<div id="menucontainer"><ul id="menu"><li>test 1<li>test2</ul></div>
</div>
</div>
</body>
如果我删除任何浮动样式或位置样式,该链接将在Chrome和Firefox中变为可点击.(但我的布局已关闭).
我的问题是:是什么造成了这种情况,有没有可靠的解决方法？
kev*_*out 33
我之前遇到过同样的问题.将鼠标悬停在锚点上时,光标不会更改为指针,也无法单击该链接.
每次,它都是由于定位元素与锚重叠,有效地成为鼠标和锚之间的一层.通常它是一个像你一样的图像.
确保图像不是那么宽,以至于它的边界或css width属性与锚点不重叠.如果这不是原因,请对menucontainer执行相同操作.
你使用firebug for firefox吗？如果没有,它可能有助于发现任何重叠的问题.
我在你的答案中有一个问题...为什么你在ul#menu没有声明顶部,底部,左侧或右侧属性的情况下相对定位？只是好奇.我不习惯看到那些不在那里的人.
ul#menu
{
position:relative;
overflow:auto;
}
似乎解决了这个问题.
我相信它,因为浮动没有被清除,你没有指定任何宽度,所以两个浮动元素是"重叠".
<h4 style="float: right; position:relative; z-index:5;">
<a href="#company" data-slide="prev">company</a>
<a href="#city" data-slide="next">city</a>
</h4>
试试这个吧...