8

在这种情况下，将鼠标悬停在左侧链接上会在其右侧（两个链接之间）出现一个小破折号。我怎样才能摆脱这个？我在 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>
4

2 回答 2

8

如果你看到的和我看到的一样（我没有所有的样式表），你看到的a是图像标签的下划线。

您可以text-decoration: none在图像链接上使用它来删除它；

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

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

当然，这在实践中使用在图像链接上设置的类会更好。

于 2013-04-20T05:39:52.483 回答
4

这是一个旧帖子，但我想贡献一些东西。这将帮助其他人为什么出现破折号 (-)。

这是因为 a 标签内有一个空白区域。例如：

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

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

于 2015-10-16T16:44:00.727 回答