Question

我在后台背景上显示一些白色文字，但文本下面显示一条蓝线（无论浏览器如何）。这是从哪里来的？

body {
    position:relative;
    background-color:black;
    font-family: Helvetica; 
    margin: 0;              /* Amount of negative space around the outside of the body */
    padding: 0;             /* Amount of negative space around the inside of the body */
}

#main_header {
    position: relative;
}


#logo {
    position:absolute;
    top: 6px;
    left: 140px;
    height: 50px;
    width: 50px;
}

#main_title {
    position:absolute;
    font-size: 15px;
    color:white;
    top: 50px;
    left: 40px;
    text-decoration:none;
    text-align:center;
    display:block;
}

<body>
    <a href="http://theurl">
    <div id = "main_header" >
        <img id = "logo" src="logo.png"/>       
        <h2 id = "main_title">Title</h2>
    </div>
    </a>

enter image description here

Answer 1

锚点标记（<a>）不能在HTML 4.01中包含div或h2等块元素。这可能会导致您看到的效果。 Read on

您可以仅重写<a>标记以围绕内联元素（下方），或指定您的文档类型为HTML5。 Here是其他解决方案。

<body>
    <div id = "main_header" >
        <a href="http://theurl"><img id = "logo" src="logo.png"/></a>      
        <h2 id = "main_title">Title</h2>
    </div>
</body>

Answer 2

尝试设置：

a img { border: none; }

a { text-decoration: none; }

正在显示带有蓝色下划线的文字，它来自哪里？

2 个答案: