Размещение таблицы внутри гиперссылки - не работает в IE - PullRequest
Новая
       14

Размещение таблицы внутри гиперссылки - не работает в IE

3 голосов
/ 16 апреля 2011

У меня есть таблица внутри гиперссылки: 

<a href="/"><table><tr><td>...</td></tr></table></a>

Во всех браузерах при наведении курсора на таблицу указатель указывается на руку, а с помощью некоторого CSS фон таблицы меняет цвет (поэтому он выглядит «выделенным»).

Однако в Internet Explorer нажатие на таблицу не имеет никакого эффекта. В Firefox и Chrome он следует гиперссылке, как и ожидалось.

Как я могу заставить IE переходить по ссылке при нажатии?

Ответы [ 4 ]

8 голосов
/ 16 апреля 2011

Нельзя вкладывать элементы уровня блока во встроенные элементы и ожидать получения правильных результатов ( вставить ссылку здесь ).

Вы можете добавить несколько стилей CSS в таблицу и применить обработчик onclick, чтобы он действовал как гиперссылка: 

<table style="fakeLink" onclick="window.location = '/';">...

И fakeLink класс: 

.fakeLink
{
  color: blue;
  border-color: blue;
  cursor: pointer;
  text-decoration: underline; /* Not sure if this is possible. */
}

И демонстрация, демонстрирующая две техники: http://jsfiddle.net/qNGrp/4/. У меня нет IE, но я думаю, что только один будет работать правильно.

3 голосов
/ 13 сентября 2012

Во-первых: размещение <a> вокруг элементов уровня блока допустимо в HTML5!Проверьте код ниже на http://validator.w3.org/

Во-вторых: Любой обходной путь JavaScript снижает доступность, поэтому это не лучшая вещь; -)

Мое решение: используйте <div>вместо <table> - как показано здесь: 

<!DOCTYPE html>
<html>
<head>
<title>MSIE sucks!</title>
</head>
<body>
<a href="javascript:alert('Yeah!')">
<table>
<tr>
<td>&lt;table&gt; Doesn't work in Internet Explorer 8 :-(</td>
</tr>
</table>
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">Solution: &lt;div style=&quot;display:table&quot;&gt;</div>
</div>
</div>
</a>
</body>
</html>
1 голос
/ 27 февраля 2013

Мне удалось найти решение для этого, оно не идеально, но оно работает:

Упрощенный CSS: 

a{ display:inline-block; position:relative; }
a:after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('x'); }

Упрощенный HTML: 

<a href='http://dropthebit.com' target='_blank'>
    <table>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
      </tr>
    </table>
</a>

Тестовая страница

0 голосов
/ 16 апреля 2011

Это не должно работать.IE имеет правильное поведение там.Таблицы являются элементами уровня блока;ссылки являются встроенными элементами.Встроенные элементы могут не содержать элементы уровня блока.

Если вы хотите щелкнуть по своему элементу, чтобы изменить страницу, вам, вероятно, понадобится Javascript.Изменение CSS не должно быть сложным: псевдо-селектор :hover все равно будет работать с элементом table.

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

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

...