Якорный тег становится нерабочей ссылкой в ​​div с float: right;

У меня есть ссылка внутри 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="#" onclick="location.href='http://www.norge.no'; return false;">test link</a></div>
    <div id="menucontainer"><ul id="menu"><li>test 1<li>test2</ul></div>
</div>
</div>

</body>

Если я удалю любой из стилей float или стилей позиции, ссылка станет интерактивной в Chrome и Firefox. (но тогда мой макет отключен).

Мой вопрос: что вызывает это, и есть ли надежный способ его решения?

ОТВЕТЫ

Ответ 1

У меня была такая же проблема. Когда вы наводите курсор на привязку, курсор не изменяется на указатель, и вы не можете нажать на ссылку.

Каждый раз это связано с позиционированным элементом, который перекрывает якорь, фактически становясь слоем между мышью и якорем. Обычно это изображение, как у вас.

Убедитесь, что изображение не так велико, что свойство границы или css ширины не перекрывает привязку. Если это не так, сделайте то же самое с контейнером меню.

Вы используете firebug для firefox? Если нет, это может помочь обнаружить любые совпадающие проблемы.

У меня есть вопрос в ответе за вас... почему вы относительно позиционируете ul#menu, не объявляя атрибут top, bottom, left или right? Просто любопытно. Я не привык видеть тех, кто не там.

Ответ 2

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

похоже, исправляет его.

Я верю, потому что поплавки не очищаются, и вы не указали ни одной ширины, поэтому два плавающих элемента "перекрываются".

Ответ 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>

Попробуйте это.,.

Ответ 4

Мое решение: убедитесь, что z-индекс оскорбительного div больше, чем вокруг него (который может переполняться).

Ответ 5

Поместите это в свои стили

#menucontainer { clear: both; }

Ответ 6

Попробуйте

HTML

<html>
    <head>
    </head>
    <body>
        <div class="page">
            <div id="header">
                <div id="logo">logo</div>
                <div id="feedback"><a href="#" onclick="location.href='http://www.norge.no'; return false;">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;
}
​

рабочая демонстрация