2

正如HTML5 规范所述

a 元素可以围绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互式内容（例如，按钮或其他链接）。

考虑到这一点，我有一个以 HTML5 doctype ( ) 开头的 WordPress PHP 文档<!DOCTYPE html>，我<article>用 a包装 a <a>，并将 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 规范？如果呈现的页面似乎不遵循给定的规范，该怎么办？

4

4 回答 4

0

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

您发布的代码适用于仅回显字符串的普通函数。

而不是使用

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

尝试使用

<a href="<?php echo get_permalink(); ?>">
于 2018-08-24T17:36:58.820 回答
0

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

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

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

于 2018-08-24T18:25:02.750 回答
-1

你可以试试

    <article>
      <a href="<?php the_url(); ?>">
         <header>
            Some header content
         </header>
         <footer>
            Some footer content
        </footer>
      </a>
    </article>
于 2018-08-24T17:03:24.170 回答
-1

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

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

你的问题在别的地方

于 2018-08-24T17:04:07.477 回答