我有一个关于在Chrome浏览器中呈现导航栏的问题。 导航栏的每个外壳之间有一点空间。
以下是在Chrome上说明此问题的图片:
我对Firefox,Safari,Opera等其他浏览器没有这个问题。
导航栏的结构如下:
<div id="nav_bar">
<table class="linkcontainer" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="navigation">
<a href="/" class="main_link">Home</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/aphosisus/"
class="main_link">Aphosisus</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/sciences/"
class="main_link">Sciences</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/pposis/"
class="main_link">Pposis</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/lougdj/" class="main_link">Lougdj</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/cv" class="main_link">Cv</a>
</div>
</td>
</tr>
</table>
</div>
导航栏CSS为:
#nav_bar {
background-image: url("./header_bg_min.jpg");
border: 0px none;
margin: 0px auto;
width: 798px;
height: 50px;
}
有人可以使用Chrome浏览器测试渲染问题吗?
谢谢!
更新:
感谢您的评论,我忘了说这个问题只出现在MacOS Mavericks上的Chrome上,我已经在Win7和Linux上使用Chrome测试过并没有问题。
答案 0 :(得分:1)
也许你的chrome版本忽略了你的内联样式属性。 cellpadding="0" cellspacing="0"
尝试添加此css:
table.linkcontainer {
border-collapse: collapse;
border-spacing: 0;
}