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

ProgramBox

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

Post author:admin
Запись опубликована:19 мая, 2023
Post category:Вопросы по программированию

#html #internet-explorer #hyperlink #html-table

#HTML #internet-explorer #гиперссылка #html-таблица

Вопрос:

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

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

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

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

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

Ответ №1:

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

Вы могли бы добавить некоторые стили 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, но я думаю, что только один будет работать должным образом.

1. Вы можете обернуть ссылки вокруг элементов уровня блока в HTML5, хотя я думаю, что вам нужно полизаполнение для обратной совместимости с IE.

2. HTML5, возможно, проще, чем HTML4 — для начала проверьте шаблон HTML5.

3. Я впервые увидел HTML5 здесь: flask.pocoo.org . Я такой » КАК ЭТА ШТУКА ПРОВЕРЯЕТСЯ ?!?!??! » Не было <head> , нет <body> , никаких закрывающих тегов для <li> s. Это было довольно тревожно…

4. Да — некоторые люди немного перегибают палку, используя синтаксис HTML5 ради этого, хотя это часто делает его более запутанным. Однако, в смысле простого использования HTML4 с несколькими дополнительными элементами и немного большей гибкостью для существующих элементов, это здорово. Хорошим примером являются ссылки вокруг блочных элементов. Помещение <nav> и <aside> и тому подобное тоже отлично, потому что вы применяете к ним CSS и все еще имеете специфику с селекторами идентификаторов CSS.

5. О да, новый выбор тегов великолепен. Скоро мне придется отказаться от своих постоянных <div> привычек к вложенности!

Ответ №2:

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

Второе: любой обходной путь JavaScript снижает доступность, так что это не лучшее, что можно сделать 😉

Мое решение: использовать <div> ‘s вместо <table> — как показано здесь:

 <!DOCTYPE html>
<html>
<head>
<title>MSIE sucks!</title>
</head>
<body>
<a href="javascript:alert('Yeah!')">
<table>
<tr>
<td>amp;<tableamp;> 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: amp;<div style=amp;quot;display:tableamp;quot;amp;></div>
</div>
</div>
</a>
</body>
</html>

Ответ №3:

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

Упрощенный 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>

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

Ответ №4:

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

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

1. логически это некорректное поведение в Интернете. очевидно, что в течение почти ~ 18 лет существования Интернета людям нужно было бы обернуть всю таблицу ссылкой. это имеет смысл, и это очень ошибочный дизайн, вы не можете сделать это в IE.