HTML img 中的奇怪像素

Question

我是 html 的新手，请原谅愚蠢的问题。我这里有这个页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">

    <style type = text/css>
        #topbar
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width:100%;
            background-color:black;
            border-style: solid;
            border-bottom-color: mediumaquamarine;
            border-bottom-width: thin;
        }
        #login 
        {
            position:fixed;
            top: 20px;
            left: 92%;
        }
        #latestItems
        {
            position: fixed;
            height:90%;
            width: 100%;
            top: 100px;
            background-color:white;
            border: 2px;
            border-color: black;
        }
        #tabs
        {
            position: fixed;
            top: 30px;
            left: 150px;
        }
        #tabs_search
        {
            position: relative;
        }
        #tabs_search:hover
        {

        }
        #tabs_lists
        {
            position: relative;
            left: 40px;
        }
        #tabs_cart
        {
            position: relative;
            left: 80px;
        }
        #tabs_home
        {
            position: relative;
            left: 120px;
        }
        #tabs_profile
        {
            position: relative;
            left: 160px;  
        }
    </style>
</head>
<body>
    <header id = topbar>
        <img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html"></img>

        <a id = "login" href = "https://steamcommunity.com/login/home/?goto=0">
            <img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50>
        </a>
        <div id = tabs>
            <a href = "search.html", title = "browse items">
                <img id = tabs_search src = "search.png" width = 2% height = 2% ></img>
            </a>
            <a href = "lists.html" title = "list items">
                <img id = tabs_lists src = "lists.png" width = 2% height = 2% ></img>
            </a>
            <a href = "shopping_cart.html" title = "my cart">
                <img id = tabs_cart src = "cart.png" width = 2% height = 2% ></img>
            </a>
            <a href = "index.html" title = "return home">
                <img id = tabs_home src = "home.png" width = 2% height = 2% ></img>
            </a>
            <a href = "my_profile.html" title = "profile">
                <img id = tabs_profile src = "profile.png" width = 2% height = 2% ></img>
            </a>
        </div>
    </header>
</body>

它看起来不错，但我在前 3 个图像的底部得到蓝色像素，在第 4 个图像（"tabs" 内的图像）底部得到紫色像素。单击时它们会变红，我不知道为什么...

Answer 1

这是因为锚点默认带有下划线，并且您已将图像包裹在锚点中。

添加

a {
   text-decoration: none;
}

到您的CSS删除它们。

蓝色是标准 link 颜色，紫色是已访问 link，红色是浏览器默认样式中 link 的活动状态。

如果页面上还有其他锚点要保留下划线，则应向包含图像的锚点添加 class 并分别设置样式。

Answer 2

您好，我已经检查了您的 html 代码。您不需要完成 img 标签。该行是因为锚标记

的文本修饰

  a{
              text-decoration:none;
              }

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">

    <style type = text/css>
        a{
          text-decoration:none;
          }
        #topbar
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width:100%;
            background-color:black;
            border-style: solid;
            border-bottom-color: mediumaquamarine;
            border-bottom-width: thin;
        }
        #login 
        {
            position:fixed;
            top: 20px;
            left: 92%;
        }
        #latestItems
        {
            position: fixed;
            height:90%;
            width: 100%;
            top: 100px;
            background-color:white;
            border: 2px;
            border-color: black;
        }
        #tabs
        {
            position: fixed;
            top: 30px;
            left: 150px;
        }
        #tabs_search
        {
            position: relative;
        }
        #tabs_search:hover
        {

        }
        #tabs_lists
        {
            position: relative;
            left: 40px;
        }
        #tabs_cart
        {
            position: relative;
            left: 80px;
        }
        #tabs_home
        {
            position: relative;
            left: 120px;
        }
        #tabs_profile
        {
            position: relative;
            left: 160px;  
        }
    </style>
</head>
<body>
    <header id = topbar>
        <img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html">

        <a id = "login" href = "https://steamcommunity.com/login/home/?goto=0">
            <img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50>
        </a>
        <div id = tabs>
            <a href = "search.html", title = "browse items">
                <img id = tabs_search src = "search.png" width = 2% height = 2% >
            </a>
            <a href = "lists.html" title = "list items">
                <img id = tabs_lists src = "lists.png" width = 2% height = 2% >
            </a>
            <a href = "shopping_cart.html" title = "my cart">
                <img id = tabs_cart src = "cart.png" width = 2% height = 2% >
            </a>
            <a href = "index.html" title = "return home">
                <img id = tabs_home src = "home.png" width = 2% height = 2% >
            </a>
            <a href = "my_profile.html" title = "profile">
                <img id = tabs_profile src = "profile.png" width = 2% height = 2% >
            </a>
        </div>
    </header>
</body>
</html>

HTML img 中的奇怪像素

Strange pixels in HTML img

html

css

image

pixels