Question

在这种情况下，将鼠标悬停在左侧链接上会在其右侧（两个链接之间）显示一个小破折号。我怎么能摆脱这个？我在Safari和Chrome中都看到了这一点，但我没有在样式表中看到任何可以实现此目的的内容。

<!DOCTYPE html>
 <html>
 <head>
         <meta charset="utf-8">
         <title>Walls</title>
         <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
         <link rel="stylesheet" href="custo.css">

        <script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>

 </head>
 <body>

 <br>
                 <a href="gallery.html">
                 <img src="test.jpg" class="testclass" alt="test" width="170" />
                 </a>

                 <a href="info.html">
                 <img src="test.jpg" class="testclass" alt="test" width="55"  />
                 </a>



 <div class="container-fluid">
 <br>


 </div><!-- .container -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto-->
     $(document).ready(function(){
     $("a[rel^='prettyPhoto']").prettyPhoto();
      });
    </script>


 </body>
</html>

Answer 1

如果您看到我看到的相同内容（我没有所有样式表），您会看到图片的a标记的下划线。

您可以在图片链接上使用text-decoration: none删除它;

<a href="gallery.html" style="text-decoration: none !important;">

样式末尾的!important有助于覆盖css中可能已经!important强调的任何选择器。

当然，使用class that you set on your image links更好地完成了这项工作。

Answer 2

这是一篇旧帖子，但我想为某些事情做出贡献。这将有助于其他人出现破折号（ - ）的原因。

这是因为a标签内部有空的空间。例如：

<a href="#">
  <i>test</i>
</a>

如果您设置这样的行：<a href="#"><i>test</i></a>短划线/下划线将消失，但某些工具可能仍然会格式化您的代码，他们会添加空格。因此，使用前一篇文章中提到的CSS将消除此问题。

将鼠标悬停在一个链接上会使其显示在右侧

2 个答案: