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

У меня есть ссылка внутри div, которая плавает справа от экрана. Ссылка не работает в FF или Chrome, но работает в IE (тестировались только с IE8).Якорный тег становится нерабочей ссылкой в div с поплавком: справа;

Простейший пример выглядит следующим образом:

<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. (но тогда мой макет отключен).

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

источник

2010-09-23 Per-Frode Pedersen

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

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

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

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

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

источник

2010-09-23 11:23:00 kevtrout

Спасибо за хорошо объяснил ответ. Чтобы ответить на ваш вопрос: я считаю, что меню ul # li.last гарантирует, что меню начинается справа и растет влево. Похоже, что позиция: relative в меню ul # не требуется, и, вероятно, она оставлена с другой попытки по правильному выравниванию меню. –

Put это ваши стили

#menucontainer { clear: both; }

источник

2010-09-23 11:23:48 Ventus

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

появляется, чтобы исправить это.

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

источник

2010-09-23 11:24:05 Ross

Спасибо! Ваш ответ помог! :) – yathrakaaran

Попробуйте

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/

источник

2010-09-23 11:25:25

Мое решение: убедитесь, что г-индекс нарушившего DIV больше, чем те, вокруг него (которые могут быть переполнены).

источник

2013-03-13 08:02:41 Mikeymike

В некоторых случаях это может работать, но будьте осторожны, что иногда это может вызвать больше проблем, чем исправлений. И z-index не работает на 'static'" позиционированных "элементах. – Dan

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

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

источник

2014-05-27 11:02:03

z-index исправил это для меня. Зачем? спасибо! –

Задайте элемент с контейнером идентификатора, чтобы иметь атрибут: clear и значение: оба или, по крайней мере, слева.

Его идентификатор контейнера наложения перекрывает вашу ссылку.

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

источник

2018-02-01 20:01:00

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

ответ

Смежные вопросы

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