html - 为什么我的链接在 "random"位置追加了下划线

Question

当我使用 a 时，仅使用 HTML 和 CSS标记它的前缀是 _

我以为我使用了 content标记某处，但令我惊讶的是，它仍然存在于 JSFIDDLE 中

<section>
    <h3>Activity</h3>
    <a href="#">
           <div class="activity">
            <div>Some</div>
            <div>> 198 days?</div>  <!-- why does this render as _> 198 days? -->

            <div>Progressing</div>
        </div>
    </a>
    <br />
    <a href="#">> does not have underscore despite having > </a>
</section>

CSS

.activity {
    background: #3ea18f;
    clear: both;
    margin-bottom: 2%;
    border-radius: 4px;
    padding-left: 10%;
}
.activity div {
    width: 33%;
    display: inline-block;
}

结果

删除 a标签解决了问题，但我需要 a标签

同样，删除 CSS .activity div还删除了 _但显然我需要风格

如果我使用 <div>&gt; 198 days?</div>，同样的问题仍然存在

Answer 1

我不知道这种行为是故意的还是渲染错误。

在 div 前面与 _有一个空格，因为你有一个新行，如果你添加一个 outline在所有元素 ( updated fiddle ) 周围，您会看到 _介于两个元素之间。

如果您添加另一个元素 ( next fiddle )，您会看到还有另一个 _ .所以下划线出现在所有inline-block之间行中的元素。

问题与>无关.

要在不改变外观的其余部分的情况下解决这个问题，您可以添加 text-decoration至 none到周边a .

您没有 > does not have underscore despite having >在前面，因为 <a href="#"> 之间没有空格和 > does not .