为什么<a>图像之间有 - (破折号)或_(下划线)

Ala*_*ain 5 html css

有人可以解释为什么我在我的图像之间看到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)