Question

我在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中变为可点击。（但我的布局已关闭）。

我的问题是：造成这种情况的原因是什么，是否有可靠的解决方法？

Answer 1

我之前遇到过同样的问题。将鼠标悬停在锚点上时，光标不会更改为指针，也无法单击该链接。

每次都是由于定位元素与锚重叠，有效地成为鼠标和锚之间的一层。通常它是一个像你一样的图像。

确保图像不是那么宽，以至于它的边界或css width属性与锚不重叠。如果这不是原因，请对menucontainer执行相同的操作。

你使用firebug for firefox吗？如果没有，它可能有助于发现任何重叠的问题。

我在答案中有一个问题...为什么你相对定位ul#menu而没有声明顶部，底部，左侧或右侧属性？只是好奇。我不习惯看到那些不在那里的人。

Answer 2

ul#menu
{
    position:relative;
    overflow:auto;
}

似乎可以修复它。

我相信它是因为浮动没有被清除，你没有指定任何宽度，所以两个浮动元素是“重叠”。

Answer 3

<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>

试试这个。。

Answer 4

我的解决方案：确保有问题的div的z-index大于它周围的z-index（可能溢出）。

Answer 5

使用ID menucontainer设置元素，使其具有属性：clear和值：both，或者至少为left。

ID ID menucontainer与您的链接重叠。

＆＃13;

<html>
<head>
<title>test</title>
<style type="text/css">
#logo {
 left:10px;
 float:left;
 top:10px;
 background-color:red;
} 
#feedback {
 float: right;
 background-color:yellow;
}
ul#menu
{
    position:relative;
}
ul#menu li
{
     display: inline;
     list-style: none;       
}
ul#menu li.last {
    margin-right: 50px;
}
#menucontainer {
clear:left;
}
</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>

＆＃13;

Answer 6

把它放到你的风格

#menucontainer { clear: both; }

Answer 7

试试这个

<强> HTML

<html>
    <head>
    </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>
                <br class="clear" />
                <div id="menucontainer">
                    <ul id="menu" class="clear">
                        <li>test 1</li>
                        <li>test2</li>
                    </ul>
                </div>
            </div>
        </div>
        </body>
</html>

<强> CSS

.clear{
    clear:both;
}
#logo {
    float:left;
    margin:10px;
} 

#feedback {
    float: right;
}

ul#menu
{
}
ul#menu li
{
    float:left;
}
ul#menu li a{
    display:block;
}
ul#menu li.last {
    margin-right: 50px;
}

工作演示

http://jsfiddle.net/C9r7f/

锚标记变为div中的非工作链接，浮点数为：右;

7 个答案: