【问题标题】:Issue with the rendering of a navigation bar on Chrome browser在 Chrome 浏览器上呈现导航栏的问题
【发布时间】:2016-01-14 03:14:02
【问题描述】:

我在将导航栏渲染到 Chrome 浏览器时遇到问题。 导航栏的每个 case 之间都有一点间距。

这是在 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 测试过,没有问题。

【问题讨论】:

  • 我无法在 Chrome (47.0.2526.106) 中复制结果。空白可能导致它。我知道如果它是一个列表,如果列表项之间有任何空间,这会导致项目之间的空间很小。我只能说尝试删除所有空白。

标签: javascript html css google-chrome


【解决方案1】:

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

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

【讨论】:

  • 我还注意到在你的 CSS 中,div.navigation 有 padding:Opx,就像字母 O 中一样。
猜你喜欢
  • 1970-01-01
  • 2015-02-07
  • 1970-01-01
  • 2018-06-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多