Якорный тег становится нерабочей ссылкой в 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;
}
рабочая демонстрация