Safari 5.1破坏了CSS表格单元格间距

Question

我的网站在Safari 5.1版本更新前在所有主要浏览器上都能正常工作。现在，主要导航损坏了。我在列表元素中的锚点元素上使用了" display:table-cell "，并且还使用了 " font-size:0 " hack 来删除菜单元素之间的间距。有其他人遇到过这个问题并能提供解决方案吗？

之前图片： 之后图片： CSS:

#navigation {
  padding-top: 7px;
}

#navigation ul.links, /* Main menu and secondary menu links */
#navigation .content ul /* Menu block links */ {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 0; /* this is a hack so that the spacing between the menu buttons disappear
                   since they are inline-block elements, this should be unneccessary when
                   CSS3 is approved */
}

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
  display: inline-block;
  padding-right: 0;
  padding-left: 0;
  margin: 0;

  /* below is a fix for IE7 to get the main navigation items lined up correctly
   * in one row
   */
  zoom: 1;
  *display: inline;
}
#main-menu ul {
  width: 100%;
}
#main-menu li {
  width: 108px;
  text-align: center;
  padding-bottom: 7px;
  font-size: 11pt;
}
#main-menu a {
  display: table-cell;
  width: inherit;
  text-decoration: none;
  font-size: 0.9em;
  color: #035B9A;
  background-color: white;
  height: 30px;
  vertical-align: middle;
}

HTML:

<div id="navigation">
    <div class="section">
        <h2 class="element-invisible">Main menu</h2>
        <ul id="main-menu" class="links inline clearfix">
            <li class="menu-379 first"><a href="/about-scrubbed">About Us</a></li>
            <li class="menu-401"><a href="/" title="">Research</a></li>
            <li class="menu-385"><a href="/education">Education</a></li>
            <li class="menu-402"><a href="/" title="">Outreach</a></li>
            <li class="menu-403 active-trail active"><a href="/news" title="" class="active-trail active">News &amp; Events</a></li>
            <li class="menu-439"><a href="/people">People</a></li>
            <li class="menu-405"><a href="/" title="">Resources</a></li>
            <li class="menu-406"><a href="/" title="">Publications</a></li>
            <li class="menu-415 last"><a href="/partners">Partners</a></li>
        </ul>
    </div>
</div>

谢谢。

需要注意的是，这是一个Drupal 7网站。

此外，我自由而谦卑地承认我不是最擅长CSS标记的人。我现在正在学习很多东西，只是试图勉强通过。

- Lester Peabody

---

你能发一下现场网站的链接吗？ - tw16

不是一个实时网站，目前正在内部开发中，计划于10月1日发布...非常抱歉。 - Lester Peabody

然而，我再次解决了自己的问题。我将列表元素设置为 display: block; 和 float: left;，然后它又开始工作了。我想把它发布为答案，但 Stack 不允许我这样做 :( 需要提高声望值！ - Lester Peabody

@BoltClock请查看您上面的评论。因为我的声望不够高，我需要再等大约6个小时，直到Stack允许我回答自己的问题。请尽快查看。 - Lester Peabody

哦，对了，我现在明白了。糟糕。 - BoltClock

Answer 1

如果您在使用Safari浏览器时出现元素尺寸显示问题，可以尝试将父元素的padding移除，并在一个子元素上添加display:table-cell;属性的padding来解决问题。

显然，Safari不喜欢在display:table;属性下添加padding。回过头来看，这是有道理的。

- Kevin C.

---

非常感谢！这个问题把我搞疯了。 - Hobo

Answer 2

通过将列表元素显示为块并将它们向左浮动来解决问题。

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
  display: block;
  float: left;
  padding-right: 0;
  padding-left: 0;
  margin: 0;

  /* below is a fix for IE7 to get the main navigation items lined up correctly
   * in one row
   */
  zoom: 1;
  *display: inline;
}

- Lester Peabody

Answer 3

您想在 display:table 元素上使用 border-collapse:collapse 来移除单元格间距。

- Phrogz

---

这是我的最初想法，但经过对CSS的审查，我实际上从未有一个带有 display: table; 父元素，所以我不确定应该把 border-collapse: collapse; 放在哪里。然而，如上所述，我的修复方法让所有东西都重新正常工作了。我会将其发布为答案，但Stack会让我等待7个小时。 - Lester Peabody

Answer 4

我拿了你的CSS和HTML，然后添加到了CSS中。

body {
    background-color: gray;
}

我得到了以下内容，看起来是正确的。

这是在运行Safari 5.1的Lion下运行的。

- Bill Lynch

---

那个更改肯定不会影响布局。也许这是Safari 5.1在Windows上的问题。不过还是谢谢你检查它。 - Lester Peabody