<a href=""> + <div> combo not working on Google Chrome</div></a>

时间:2013-01-03 15:50:54

标签: internet-explorer google-chrome html href

我正在使用水平菜单,这个HTML代码:

<table class="tabellacontent">
    <tr>
        <a class="mesitab" href="link"><td><div class="tabmese">Gen</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Feb</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Mar</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Apr</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Mag</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Giu</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Lug</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Ago</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Set</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Ott</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Nov</div></td></a>
        <a class="mesitab" href="link"><td><div class="tabmese">Dic</div></td></a>
    </tr>
</table>

使用以下CSS:

.tabellacontent{
margin:auto;
position:relative;
width:95%;
text-align:center;
}
.mesitab{
text-decoration:none;
}
.tabmese{
color:rgb(0,56,130);
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:100%;
height:15px;
top:1px;
text-align:center;
vertical-align:middle;
background-color:silver;
font-size:12px;
}
.tabmese:hover{
color:white;
background-color:rgb(49,87,132);
cursor: hand;
}​

我的问题是此代码适用于IE(7/8),但它无法在Google Chrome上运行。

如何解决此问题?

此处有jsFiddle

的链接

2 个答案:

答案 0 :(得分:2)

首先,tr应该将其正常的孩子设为td你的错误的HTML。

<强>解决方案a标记放在tddiv标记中,然后将paddingmargin div设为0 然后制作一个标签display:block来覆盖整个td。

答案 1 :(得分:-1)

我正在学习j-query mobile,我发现使用chrome进行href时出现了一些问题,这些项目不能在chrome上运行本地驱动器,你必须上传到服务器。