CSS / HTML-悬停时出现流浪破折号

Question

我在包含产品合作伙伴徽标的网站上有一节。总共约有28个徽标-其中10个是指向单独产品页面的链接。当我将鼠标悬停在它们上方时，右下角会出现一个破折号，并且我找不到它的来源，这使我发疯。它出现在除最后一个链接的所有链接徽标图像上-再次，我看不到与该徽标图像的区别。这就是我的意思-

带有破折号的徽标出现

无破折号

它看起来像是一页代码中的破折号，但我什么都看不到-

partners.php

<div class="row">
  <div id="partnerimages" class="col-md">
    <a href="<?php the_permalink(76); ?>" id="adia">
      <?php if( get_field('axe_img') ): ?>
      <img src="<?php the_field('axe_img'); ?>" />
      <?php endif; ?>
    </a>
    <?php if( get_field('beachrotana_img') ): ?>
    <img src="<?php the_field('beachrotana_img'); ?>" />
    <?php endif; ?>
    <a href="<?php the_permalink(78); ?>" id="adia">
      <?php if( get_field('bloom_img') ): ?>
      <img src="<?php the_field('bloom_img'); ?>" />
      <?php endif; ?>
    </a>
    <a href="<?php the_permalink(80); ?>" id="adia">
      <?php if( get_field('bodytree_img') ): ?>
      <img src="<?php the_field('bodytree_img'); ?>" />
      <?php endif; ?>
    </a>
    <a href="<?php the_permalink(82); ?>" id="adia">
      <?php if( get_field('certo_img') ): ?>
      <img src="<?php the_field('certo_img'); ?>" />
      <?php endif; ?>
    </a>
    <?php if( get_field('daphne_img') ): ?>
    <img src="<?php the_field('daphne_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('ecolab_img') ): ?>
    <img src="<?php the_field('ecolab_img'); ?>" />
    <?php endif; ?>
    <a href="<?php the_permalink(84); ?>" id="adia">
      <?php if( get_field('fish_img') ): ?>
      <img src="<?php the_field('fish_img'); ?>" />
      <?php endif; ?>
    </a>
    <?php if( get_field('fsw_img') ): ?>
    <img src="<?php the_field('fsw_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('gloss_img') ): ?>
    <img src="<?php the_field('gloss_img'); ?>" />
    <?php endif; ?>
    <a href="<?php the_permalink(86); ?>" id="adia">
      <?php if( get_field('guy_img') ): ?>
      <img src="<?php the_field('guy_img'); ?>" />
      <?php endif; ?>
    </a>
    <?php if( get_field('happiness_img') ): ?>
    <img src="<?php the_field('happiness_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('herbal_img') ): ?>
    <img src="<?php the_field('herbal_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('ignite_img') ): ?>
    <img src="<?php the_field('ignite_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('js_img') ): ?>
    <img src="<?php the_field('js_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('khalidya_img') ): ?>
    <img src="<?php the_field('khalidya_img'); ?>" />
    <?php endif; ?>
    <a href="<?php the_permalink(88); ?>" id="adia">
      <?php if( get_field('lucky_img') ): ?>
      <img src="<?php the_field('lucky_img'); ?>" />
      <?php endif; ?>
    </a>
    <a href="<?php the_permalink(90); ?>" id="adia">
      <?php if( get_field('lux_img') ): ?>
      <img src="<?php the_field('lux_img'); ?>" />
      <?php endif; ?>
    </a>
    <?php if( get_field('madiso_img') ): ?>
    <img src="<?php the_field('madiso_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('maria_img') ): ?>
    <img src="<?php the_field('maria_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('prca_img') ): ?>
    <img src="<?php the_field('prca_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('qcomm_img') ): ?>
    <img src="<?php the_field('qcomm_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('radwater_img') ): ?>
    <img src="<?php the_field('radwater_img'); ?>" />
    <?php endif; ?>
    <?php if( get_field('radmedia_img') ): ?>
    <img src="<?php the_field('radmedia_img'); ?>" />
    <?php endif; ?>
    <a href="<?php the_permalink(92); ?>" id="adia">
      <?php if( get_field('shangri_img') ): ?>
      <img src="<?php the_field('shangri_img'); ?>" />
      <?php endif; ?>
    </a>
    <?php if( get_field('sofrank_img') ): ?>
    <img src="<?php the_field('sofrank_img'); ?>" />
    <?php endif; ?>
    <a href="<?php the_permalink(94); ?>" id="adia">
      <?php if( get_field('tips_img') ): ?>
      <img src="<?php the_field('tips_img'); ?>" />
      <?php endif; ?>
    </a>
    <a href="<?php the_permalink(96); ?>" id="adia">
      <?php if( get_field('xbd_img') ): ?>
      <img src="<?php the_field('xbd_img'); ?>" />
      <?php endif; ?>
    </a>
  </div>
</div>

如果不是来自文本编辑器，那还能在哪里呢？我检查了页面和ACF。谁能帮忙/看到我没办法的事情？

Answer 1

在HTML中，空格是“规范化”的。这意味着连续的多个空格字符将被压缩为单个空格字符。但是，这也意味着将其他不可打印的字符转换为空格字符，包括回车符。

因此，如果您编写这样的超链接：

<a href="somePath">Some content</a>

只有a元素的内容是文本，所有这些文本都是可单击的内容，如果应用了下划线，则所有文本都将带有下划线。

但是，在您的情况下，您的代码基本上是这样的：

<a href="somePath">
  <img src="somePath"></a>

这会将回车符放入打开和关闭a元素内，并且该回车符被转换为空格，而该空格现在已成为元素​​内容的一部分。如果应用了下划线，则该空间将带有下划线。

因此，您可以重新整理HTML结构，以在代码中不包含回车符，也可以关闭以下CSS链接的下划线：

a  { text-decoration:none; }