Question

只要其中没有交互内容（例如按钮或其他链接），元素可以包裹在整个段落，列表，表格等等，甚至整个节中。

考虑到这一点，我有一个以HTML5文档类型（<!DOCTYPE html>开头的WordPress PHP文档，并用<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规范？如果渲染的页面似乎不符合给定的规范，该怎么办？

Answer 1

您的问题与函数the_permalink()有关，该函数将包含过滤器和其他内容。

您发布的代码与仅回显字符串的普通函数一起正常工作。

代替使用

<a href="<?php the_permalink(); ?>">

尝试使用

<a href="<?php echo get_permalink(); ?>">

Answer 2

在这种情况下，其他一些自定义和Wordpress函数正在<a>标签内创建其他project_categories_terms_links()标签edit_post_link()和<article>，这导致了奇怪的呈现。

一旦我删除了这些内容或将它们制成纯文本，一切都会按预期呈现。

希望这可以帮助遇到相同问题的任何人。

Answer 3

您可以尝试

    <article>
      <a href="<?php the_url(); ?>">
         <header>
            Some header content
         </header>
         <footer>
            Some footer content
        </footer>
      </a>
    </article>

Answer 4

我只是使用此简单示例测试了您的代码，它在我的浏览器中运行良好

<?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>

您的问题在其他地方

如何用链接包装一个块元素？

4 个答案: