div中间的蓝色下划线

时间:2013-06-06 19:52:23

标签: html css

我有一个蓝色下划线,我无法删除。 我很确定它是边框:无边框或文字修饰:没有问题,但我似乎无法找到解决方案。

以下是我的问题的截图:

HTML:

<a href="#top"><div class="content_tab" id="first_tab">
    <span class="tab_text_centred">Back to top</span>
</div></a>

CSS:

.content_tab {
    width: 220px;
    height: 340px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
    background-color: #000;

    overflow: hidden;
    color: #FFF;
    font-family: Georgia, Times ,serif;
    font-size: 30px;
    font-style: italic;
}
#first_tab {
    background-color: #1b1c20;
    text-align: center;
}
.tab_text_centred {
    position:relative;
    top:153px;
}

JSFIDDLE:http://jsfiddle.net/craigzilla/DptMf/

5 个答案:

答案 0 :(得分:2)

您无法在HTML5之前的版本中放置a标记。这不是你如何制作一个div,它的内容链接可以在HTML5之前点击。您的问题似乎可能与以这种方式使用此标记导致的文本修饰问题相关联。确保您采用正确的HTML 4.01方式或保留它,但确保在文档的头部使用正确的声明。

答案 1 :(得分:2)

标签具有默认属性display:inline。 DIV标签有defaut属性:display:block。 标签包装DIV标签与W3C不兼容。 根据您的情况,它可以更简单如下:

HTML code:

<a href="#top" class="content_tab" id="first_tab">
    <span class="tab_text_centred">Back to top</span>
</a>

CSS代码:

.content_tab {
    width: 220px;
    height: 340px;
    line-height: 340px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
    background-color: #000;
    overflow: hidden;
    color: #FFF;
    font-family: Georgia, Times ,serif;
    font-size: 30px;
    font-style: italic;
}
#first_tab {
    background-color: #1b1c20;
    text-align: center;
}

答案 2 :(得分:1)

我没有看到任何东西,但请确保您没有通过执行以下操作得到任何强调,然后再试一次。

a, a:focus, a:active, a:hover, a:visited {
    text-decoration:none;
}

答案 3 :(得分:1)

我没有看到使用Chrome的小提琴,但这是一个额外的标记。

http://jsfiddle.net/DptMf/2/

<a href="#top" class="content_tab" id="first_tab"> Back to top </a>

.content_tab {
    width: 220px;
    height: 340px;
    line-height:340px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
    background-color: #000;
    text-decoration:none;
    overflow: hidden;
    color: #FFF;
    font-family: Georgia, Times ,serif;
    font-size: 30px;
    font-style: italic;
}
#first_tab {
    background-color: #1b1c20;
    text-align: center;
}

Is putting a div inside an anchor ever correct?

答案 4 :(得分:0)

由另一个人指定:

'你不能在div周围放置标签。这不是你如何制作一个div,它的内容链接是可点击的。

这适用于HTML5之前版本,对a代码的支持率较低。我认为这是由此操作引起的文本修饰问题。