Question

有人可以解释为什么我之间会看到2个破折号（或下划线）我的照片，像这样：

enter image description here

如何删除它们？

这种奇怪的行为出现在chrome（linux），safari（mac）以及firefox（mac）中。

＆＃13;

    <html>
    <head>
        <style type="text/css" media="screen">
            ul li {
                display: inline;
            }
        </style>
    </head>
    <body style="background: none;">
        <ul clas="">
            <li>
                <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
                    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
                </a>
            </li>
            <li>
                <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
                    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
                </a>
            </li>
            <li>
                <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
                    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
                </a>
            </li>
        </ul>
    </body>
    </html>

＆＃13;

Answer 1

这不是一个下划线，它是一个链接的下划线。注意你的标记：

<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
</a>

img之前和之后a内有空格。a。如果<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>元素的样式设置为带下划线，则该空格将加下划线。

您可以删除空格：

a {
    text-decoration: none;
}

和/或您可以更改样式：

{{1}}

Answer 2

只需在CSS中的text-decoration: none标记上设置a

a{
  text-decoration: none;
}

Answer 3

你需要这个html：

<a ...><img /></a>
       ^------^---- no spaces/linebreaks.

html源代码中的换行符呈现为空格字符。因此，标准链接/下划线显示会将您的图像边缘延伸到您的换行符所呈现的空间宽度。

Answer 4

这是因为它包含在链接中。您必须使用CSS删除下划线。

.myListWithoutUnderlines a{
    text-decoration: none;
}

.myListWithoutUnderlines li {
    display: inline;
}

<ul class="myListWithoutUnderlines">
   <li>
      <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
          <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
      </a>
   </li>
   <li>
      <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
          <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
      </a>
   </li>
   <li>
      <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
          <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
      </a>
   </li>
</ul>

Answer 5

下划线是由浏览器在关闭</a>标记之前在图像之后注册空格引起的。要抵消这种情况，您需要删除缩进：

<html>
<head>
    <style type="text/css" media="screen">
        ul li {
            display: inline;
        }
    </style>
</head>
<body style="background: none;">
    <ul class="">
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
    </ul>
</body>
</html>

Answer 6

HTML的编写方式，在浏览器将锚样式应用于<img>之前的</a>后面有空格（下划线）。

我实际上建议做一些像（CSS）a img { display: block; float: left; }

这样的事情

为什么<a> images</a>之间有 - （破折号）或_（下划线）

6 个答案: