Проблема с показом текста в IE, когда <a>расположен над другим элементом

Question

Я пытался разработать способ сделать клики на строки ASP.NET GridView (или таблицы в целом), сохраняя при этом все обычные действия, которые вы бы связали со ссылками - правильное контекстное меню правой кнопкой мыши, возможность щелчка средней кнопкой мыши открыть в новой вкладке и т. д.

Мое решение использует jQuery для поиска тегов в каждой строке и расширения этого тега до размера строки, создавая впечатление, что строка активна. Все это прекрасно работает в Firefox и Chrome, но IE отдает приоритет тексту в таблице, а не тегу , поэтому вы получаете курсор выбора текста и не можете щелкнуть ссылку при наведении курсора на текст. Этот простой пример показывает, что я имею в виду:

<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>

<a href="#" class="link">link here</a>
<div class="content">
    You can't click the link when you hover over this text in IE    
</div>

Это может быть сделано специально для доступности, но в таком случае я бы ожидал, что другие браузеры последуют его примеру. Кто-нибудь может предложить какие-либо предложения относительно того, как избежать проблемы?

Answer 1

Вы пробовали установить заполнение a для заполнения строки таблицы?

Сложность в том, что вам придется выполнять математику, чтобы она не выходила за ряд. Так что-то вроде:

$("a").css("padding-top", function() {
         $(this).closest("tr").height - $(this).height;
       });

и т. Д. В зависимости от положения a в строке таблицы.

Я думаю, что, возможно, IE рассматривает перекрывающиеся элементы (как расположенные друг над другом) как возможный конфликт и, таким образом, принимает решение попытаться приспособить оба ("ну, ссылка очень большая, но текст снаружи на самом деле это не ссылка, поэтому давайте относимся к ней как к обычному тексту ") и т. д., но те элементы, которые перекрываются исключительно по стилю (что я думаю, считается заполнением), не вызовут никаких тревог, потому что, эй, это просто визуальная вещь !

Просто подумайте вслух, дайте мне знать, если это сработает.

Answer 2

Вероятно, одна из проблем, когда IE создает новый контекст стекирования z-index, где это не должно быть. Либо у вас есть позиционированный родительский элемент без z-индекса (известная ошибка IE), либо, может быть, IE так или иначе просто делает это для ячеек таблицы, поскольку это вводит новый offsetParent.

Обычный подход - поместить ссылку в каждую ячейку (содержащую только nbsp, если она пуста) и использовать «display: block», чтобы ссылка заполняла ширину ячейки.

Answer 3

Текст не будет просвечивать, если для элемента задан цвет фона или -image.

попробовать ...

$ ("a", this) .css ("background-image", "url (/images/spacer.gif)");

Answer 4

Альтернативный подход: вместо того, чтобы делать ссылку размером строки, почему бы не сделать всю строку кликабельной?

$('tr').click(function(){
    $(this).find('a.link').click();
});

Возможно, вы захотите использовать свойство css cursor, чтобы строка также выглядела кликабельной.

Answer 5

почему бы просто не сделать блок display: и добавить в него другой div?