Jquery 在 safari 中显示/隐藏

Question

我创建了一个简单的导航栏，使用 Jquery .show() 和 .hide() 显示和隐藏按钮。在 Firefox 中查看时它可以正常工作，但在 Safari 中查看时，每次隐藏/显示按钮时它都会在导航栏中添加额外的空格。

示例如下:http://jsfiddle.net/My4d4/

Answer 1

不要使用display: table和display: table-cell

Webkit(Safari 和 Chrome 使用的渲染引擎)中似乎存在重绘“bug”，导致 display: table-cell 元素被错误重绘。如果包含的 div(带有 display: table 的 div 被隐藏，然后重新显示，则项目将被正确绘制。

但是，似乎当 display: table-cell 元素被隐藏并重新显示时，其先前的宽度会重新计算到单元格的位置以及当前的宽度中，从而产生行为怪异。

我建议使用百分位宽度、float: left 和默认显示。如果你想要一张 table ，就用一张 table 。如果您想避免使用表格，就避免使用表格并正确执行。

请see my working example at jsFiddle