在带有float: right的div中，锚标签变为非工作链接；
在带有float: right的div中，锚标签变为非工作链接；
提问于 2010-09-23 19:13:38
我在屏幕右侧的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中变为可单击。(然后我的布局就关闭了)。
我的问题是:是什么导致了这个问题，有没有可靠的方法来解决它？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-09-23 19:23:01
我以前也遇到过同样的问题。当您将鼠标悬停在锚点上时，光标不会变为指针，并且您无法单击该链接。
每一次，它都是由于一个定位元素与锚点重叠，有效地成为鼠标和锚点之间的一层。通常它是一个像你这样的图像。
确保图像不会太宽，以至于它的边界或css宽度属性不会与锚点重叠。如果这不是原因，请对menucontainer执行相同的操作。
你使用firefox的firebug吗？如果没有，它可能有助于发现任何重叠的问题。
我在you...why的答案中有一个问题，您是否在不声明顶部、底部、左侧或右侧属性的情况下相对定位ul#menu？只是好奇而已。我不习惯看到那些不在那里的人。
Stack Overflow用户
发布于 2010-09-23 19:24:06
ul#menu
{
position:relative;
overflow:auto;
}似乎可以解决这个问题。
我相信这是因为浮点数没有被清除，并且您没有指定任何宽度，所以两个浮动元素是“重叠的”。
Stack Overflow用户
发布于 2014-05-27 19:02:03
<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>试试这个吧。。。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3777714
复制相关文章
相似问题