为什么我的链接在＆＃34;随机＆＃34;附加下划线？位置

Question

仅使用HTML和CSS，当我使用a标记时，它前面加上_

我原本以为我曾在某个地方使用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;
}

RESULT

删除a代码可以解决问题，但我需要a代码

同样，删除CSS .activity div也会移除_，但显然我需要样式

如果我使用<div>&gt; 198 days?</div>

，相同的问题仍然存在

Answer 1

<section>
    <h3>Activity</h3>
    <a href="#">
           <div class="activity"><div>Some</div><div>> 198 days?</div><div>Progressing</div>
        </div>
    </a>
    <br />
    <a href="#">> does not have underscore despite having > </a>
</section>

https://jsfiddle.net/y4zpgkfe/

Answer 2

我不知道这个行为是打算还是渲染错误。

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

如果您添加其他元素（next fiddle），则会看到还有另一个元素_。因此，下划线出现在行中的所有inline-block元素之间。

问题与>无关。

要解决此问题而不更改其余部分，您可以将text-decoration添加到none周围的a。

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