Css 块级自动关闭锚定标签不能正常工作

这里发生了奇怪的HTML行为。我有一个环绕整个标签的链接，它本身包含文章的细节。目标是使整个文章块可点击

article { margin-bottom: 1.5em; }

.page-header, .entry-header { padding: 0; }

.entry-title, .page-title { margin-top: 0; line-height: 1; padding: 1em .8em 0 .8em; }

.entry-header { position: relative; top: 0; left: 0; width: 100%;  }

.entry-thumb { position: relative; top: 0; left: 0; background-color: rgba(70,64,60,1); }
.entry-thumb img { width: 100%; }

.opacity { opacity: .6; }
.opacity:hover { opacity: 1; }

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    line-height: 1;
    margin: 0;
    padding: 1.5em;
    background: linear-gradient(to bottom, rgba(70,64,60,1) 5%, rgba(70,64,60, 0) 50%);
}
.header-overlay.male { background: linear-gradient(to bottom, rgba(0,0,155,.5) 5%, rgba(0,0,155, 0) 50%); }
.header-overlay.female { background: linear-gradient(to bottom, rgba(255,0,255,.5) 5%, rgba(255,0,255, 0) 50%); }

.header-overlay h1 {
    font-size: 2em;
    line-height: 1;
    color: #FFF;
    padding: 0;
    margin: 0
}

.header-overlay .entry-meta a { color: #FFF; }
.header-overlay .entry-meta { 
    line-height: 2;
    color: #FFF;
    text-transform: uppercase;
    opacity: .7;
    font-size: .8em;
}

但是，一旦我在浏览器中运行代码，ahref会自动关闭，并且在文章块中的每个子元素周围都会出现许多实例。坏消息是，它不能使整个文章块可点击

article { margin-bottom: 1.5em; }

.page-header, .entry-header { padding: 0; }

.entry-title, .page-title { margin-top: 0; line-height: 1; padding: 1em .8em 0 .8em; }

.entry-header { position: relative; top: 0; left: 0; width: 100%;  }

.entry-thumb { position: relative; top: 0; left: 0; background-color: rgba(70,64,60,1); }
.entry-thumb img { width: 100%; }

.opacity { opacity: .6; }
.opacity:hover { opacity: 1; }

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    line-height: 1;
    margin: 0;
    padding: 1.5em;
    background: linear-gradient(to bottom, rgba(70,64,60,1) 5%, rgba(70,64,60, 0) 50%);
}
.header-overlay.male { background: linear-gradient(to bottom, rgba(0,0,155,.5) 5%, rgba(0,0,155, 0) 50%); }
.header-overlay.female { background: linear-gradient(to bottom, rgba(255,0,255,.5) 5%, rgba(255,0,255, 0) 50%); }

.header-overlay h1 {
    font-size: 2em;
    line-height: 1;
    color: #FFF;
    padding: 0;
    margin: 0
}

.header-overlay .entry-meta a { color: #FFF; }
.header-overlay .entry-meta { 
    line-height: 2;
    color: #FFF;
    text-transform: uppercase;
    opacity: .7;
    font-size: .8em;
}

以及我编码的来源：

<a href="<?php the_permalink(); ?>" rel="bookmark">
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
            <figure class="entry-thumb">
                <?php if(has_post_thumbnail()) { the_post_thumbnail( 'large', array('class' => 'opacity') ); } ?>
            </figure>
            <div class="header-overlay">
                <h1><?php the_title(); ?></h1>
                <div class="entry-meta"><?php wordpress_posted_on(); ?></div>
            </div>
        </header>
    </article><!-- #post-## -->
</a>

奇怪的是，它输出的代码带有几个ahref

    <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"></a>

<article id="post-26" class="post-26 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorised">
    <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
    </a>
    <header class="entry-header">
        <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
            <figure class="entry-thumb">
                <img width="640" height="480" src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="opacity wp-post-image" alt="Blue_merle_picture"> </figure>
        </a>
        <div class="header-overlay">
            <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
                <h1>
                    Blue Merle Dog              </h1>
            </a>
            <div class="entry-meta">
                <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
                    <span class="posted-on">Posted on </span></a>
                <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
                    <time class="entry-date published updated" datetime="2015-04-24T00:26:55+00:00">24th April 2015</time>
                </a><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost/Wordpress/author/administrator/">Admin</a></span></span>
            </div>
        </div>
    </header>
</article>

我不介意，但它并没有使整个区块可点击，只有h1标题和后元日期和作者

编辑：我的php/wordpress循环基本如下

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php if ( have_posts() ) : ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <?php
                    /* Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'content', get_post_format() );
                ?>

            <?php endwhile; ?>

            <?php the_posts_navigation(); ?>

        <?php else : ?>

            <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

使用该行：获取模板部分“内容”，获取发布格式；调用文章块上方的代码。

尝试更改此代码：

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

更新：刚刚注意到你的输出…你能告诉我们你正在使用的PHP循环吗

---

更新2：删除浮动并为锚点添加clearfix方法。但是，从你的输出来看，你仍然到处都有一些奇怪的锚，你能给我们看看你的PHP循环吗？

晚会迟到了，但我知道问题出在哪里了

想象一下你有以下几点

<a href="link.html">
  <p> <a href="link2.html">Foo</a> </p>
</a>

当你点击内部锚点时，你会去哪个url

我不清楚如果检测到嵌套的锚标记，自动关闭标记的函数/机制是什么，但这本质上就是因果关系

---

底线是：不要在WordPress中嵌套锚定标记，这是非法的HTML，因此它可以阻止锚定标记。

这看起来像IE8所呈现的效果——在现代borwsers中，这应该是预期的效果。但请注意，必须将块级链接设置为显示：block；要跨浏览器正常工作。请同时参考和@feeela，我正在使用Chrome，我很惊讶它应该可以工作。也许这与我使用位置的子元素有关：绝对和相对？嗯，有点困惑。只是尝试使用左浮动，它确实使整个区块可点击，但它会弄乱布局，所有标题仅堆积在第一个区块的顶部。尝试使用新css，但仍然相同。我用所有的PHP循环更新了我的问题——当我清楚地使用一个且仅使用一个时，我不知道这些AHREF来自何处@拉扎尔，你不记得你曾经解决过这个问题吗？我得到了完全相同的东西。非常令人困惑。。

<a href="link.html">
  <p> <a href="link2.html">Foo</a> </p>
</a>