我在一个 float 到屏幕右侧的 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>
如果我删除任何 float 样式或位置样式，该链接将在 Chrome 和 Firefox 中变得可点击。 (但后来我的布局关闭了)。
我的问题是:是什么原因造成的，是否有可靠的解决方法？
最佳答案
我以前遇到过同样的问题。当您将鼠标悬停在 anchor 上时，光标不会变为指针，您无法点击链接。
每次都是由于定位元素与 anchor 重叠，有效地成为鼠标和 anchor 之间的层。通常它是一张像您一样的图像。
确保图像没有太宽以至于它的边界或 css 宽度属性没有与 anchor 重叠。如果这不是原因，请对菜单容器执行相同的操作。
您是否将 firebug 用于 firefox？如果不是，它可能有助于发现任何重叠的问题。
我的答案中有一个问题...为什么您相对定位 ul#menu 而不声明顶部、底部、左侧或右侧属性？只是好奇。我不习惯看到那些不在那里的人。
关于html - anchor 标记在 float 为 : right; 的 div 中变为无效链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3777714/