javascript - 在 Chrome 浏览器上呈现导航栏的问题

标签 javascript html css google-chrome

我有一个关于在 Chrome 浏览器中呈现导航栏的问题。 导航栏的每个 case 之间有一点空间。

这是一张图片,说明了 Chrome 上的这个问题:

enter image description here

我在使用其他浏览器如 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 测试过,它们都没有问题。

最佳答案

也许您的 chrome 版本忽略了您的内联样式属性。 cellpadding="0"cellspacing="0" 尝试添加此 css:

table.linkcontainer {
    border-collapse: collapse;
    border-spacing: 0;
}

关于javascript - 在 Chrome 浏览器上呈现导航栏的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34781086/

相关文章:

html - 输入或文本区域中带有边框半径的背景图像

javascript - jQuery 遍历数组并添加到 ajax 方法

javascript - html 超链接 <a> 不刷新

javascript - Firebase 托管 - 从未经身份验证的来源加载脚本

javascript - 使用 JavaScript 填充 <select>

javascript - 使用 http header 预览 pdf

javascript - 如何在 .ascx 文件中使用 onload 属性

跨浏览器范围的 Javascript 插件

php - 尝试通过 PHP 将内容居中

css - 使用 :not 从样式中排除 child