Ссылка на весь div не работает, когда курсор находится над текстом в IE - PullRequest
Новая
       1

Ссылка на весь div не работает, когда курсор находится над текстом в IE

3 голосов
/ 13 июля 2011

У меня есть этот код для демонстрации . Это заставляет мою ссылку распространяться на весь div, что прекрасно работает в Firefox, но в IE, когда я перемещаю курсор по тексту, он меняется на текстовый курсор, и ссылка там не работает ... Я попытался поиграться с z-index, но безрезультатно ... какие-либо предложения?

Мне нужно заполнить свой div другими divами с их собственным содержимым, поэтому 

a style="display: block"

не вариант, я также хочу избежать Javascript, как 

onclick="location.href=

Ответы [ 4 ]

5 голосов
/ 13 июля 2011

У меня есть решение для вас.В HTML5 было бы правильно использовать <div> внутри тега <a>.Но так как вы не можете изменить свой язык, а HTML4.01 не позволяет блокировать элементы внутри <a>, я бы предложил подделка .Под этим я подразумеваю использовать <span> внутри тега <a> и стилизовать их, чтобы они действовали как <div>.Вот рабочий пример: http://jsfiddle.net/DzpjT/11/

HTML: 

<body>
    <a href="http://www.google.com">
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
    </a>
</body>

CSS: 

a{
    display: block;
    width:700px;
    height:500px;
    margin: 10px;
    background-color: lightblue;
    color: black;
    text-decoration: none;
}
span.fakediv{
    float:left;
    clear: both;
    display: block;
    margin: 10px 20px;
    cursor: pointer;
}
1 голос
/ 13 июля 2011

Как сказал brenjt, я думаю, вам просто нужно добавить атрибут высоты к вашему css.Он также добавил кое-что еще, что хорошо, но по моему опыту это не имеет явно установленной высоты в вашем CSS, что часто вызывает это.

1 голос
/ 13 июля 2011

Измените свой код на это: 

<a href="http://www.google.com/" style="display:block;position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 10;"></a>

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

0 голосов
/ 18 марта 2013

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

Пока я отлаживалвопрос, я добавил цвет фона для моего тега.Это ясно продемонстрировало, что тег полностью покрывал содержимое чуть выше него в DOM, как и предполагалось.Вся область была кликабельна.Как только я удалил цвет фона, наведение курсора на текст превратило курсор в значок вставки и не регистрировало щелчок.

Итак, поскольку я все равно уже использовал прозрачный png размером 1 пиксель на странице, все равно(для исправления пользовательских шрифтов в IE), я просто установил это как фоновое изображение на теге.

Это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...