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; }

Answer 2

这肯定会解决问题：

#partnerimages a:hover {text-decoration:none!important;}

您看到的是下划线，而不是短划线。

CSS / HTML - 悬停时出现的杂散短划线

2 个答案: