Как обернуть элемент блока ссылкой?
Как сообщает Спецификация HTML5
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).
Имея это в виду, у меня есть документ WordPress PHP, начинающийся с документа типа HTML5 (<!DOCTYPE html>), и я упаковываю <article> в <a> и установил <a> на display: block.
Мой исходный PHP:
<a href = "<?php the_permalink(); ?>">
<article>
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</article>
</a>
Но когда я просматриваю его в нескольких современных браузерах (протестированных в Chrome, Firefox и Safari), я получаю следующее:
<a href = "the-correctly-rendered-url">
</a>
<article>
<a href = "the-correctly-rendered-url"></a>
<header>
<a href = "the-correctly-rendered-url">
Some header content
</a>
</header>
<footer>
Some footer content
</footer>
</article>Обертка <a> полностью перемещается за пределы <article> и дублируется, чтобы обернуть некоторые элементы внутри нее.
Эти браузеры просто не соответствуют спецификациям HTML5? Что можно сделать, если отображаемая страница не соответствует заданной спецификации?
То, что вы говорите в браузере, по-видимому, является представлением DOM? Как выглядит фактический исходный код HTML, полученный браузером? Ваш PHP-скрипт сделал этот вывод напрямую, или это может быть отправлено через дополнительные парсеры / фильтры / что угодно системой вне этого скрипта, CMS, wordpress, ...?
@AmmoPT Я скрыл фактический php для этого вопроса, но фактическая часть URL-адреса отображается правильно.
@CBroe Да, это страница на сайте Wordpress.
Ответы 4
ты можешь попробовать
<article>
<a href = "<?php the_url(); ?>">
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</a>
</article>
Я только что протестировал ваш код на этом простом примере, и он хорошо работает в моих браузерах.
<?php
function the_url()
{
echo 'http://exemple.com';
}
?>
<a href = "<?php the_url(); ?>">
<article>
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</article>
</a>
Выход
<a href = "http://exemple.com">
<article>
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</article>
</a>
Ваша проблема в другом месте
Это не ответ.
Не могли бы вы предоставить больше кода, чем сама оболочка, потому что, как указано, предоставленный вами код работает должным образом. Проблема не в предоставленном вами коде, а в другом месте. Я считаю, что вы ошибаетесь, полагая, что проблема заключается в том, что браузер не поддерживает HTML5. Я думаю, что это не так. Чтобы я или кто-либо еще мог вам помочь, требуется больше кода.
Ваша проблема связана с функцией the_permalink (), которая будет содержать фильтры и прочее.
Опубликованный вами код отлично работает с обычной функцией, которая просто отображает строку.
Вместо использования
<a href = "<?php the_permalink(); ?>">
Попробуйте использовать
<a href = "<?php echo get_permalink(); ?>">
Извинения. Я сократил свой код вопроса до сути проблемы. В своем производственном коде я использую the_permalink();, который отлично отображается. Это тег <a>, который по-прежнему неправильно переносится - отсюда и настоящая проблема. Я обновлю свой вопрос, чтобы уточнить.
@dmoz Я обновил ответ соответственно. Все, что я сказал о get_url(), означает get_permalink, попробовать?
Пробовал. Он отображает строку URL-адреса так же (правильно), что и метод, который я уже использовал, но проблема с упаковкой все еще существует.
В этом случае некоторые другие пользовательские функции и функции Wordpress создавали дополнительные теги <a>, project_categories_terms_links() и edit_post_link() внутри тега <article>, что вызывало странный рендеринг.
После того, как я удалил их или сделал их обычным текстом, все отображалось, как ожидалось.
Надеюсь, это поможет любому, кто столкнется с той же проблемой.
Можете показать
the_url()?