有人可以解释为什么我在我的图像之间看到2个破折号(或下划线),如下所示:

如何删除它们?
这种奇怪的行为出现在chrome(linux),safari(mac)以及firefox(mac)中.
<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>Run Code Online (Sandbox Code Playgroud)
Dav*_*vid 11
它不是下划线,而是链接的下划线.注意你的标记:
<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>
Run Code Online (Sandbox Code Playgroud)
之前和之后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>
Run Code Online (Sandbox Code Playgroud)
和/或你可以改变造型:
a {
text-decoration: none;
}
Run Code Online (Sandbox Code Playgroud)