Jquery 在 safari 中显示/隐藏

发布于 2024-12-12 02:05:15 字数 216 浏览 0 评论 0原文

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

这是示例: http://jsfiddle.net/My4d4/

I created a simple navigation bar that shows and hides buttons using Jquery .show() and .hide(). It works properly when viewing in Firefox but when viewing in Safari it adds extra spaces into the navigation bar every time you hide/show the buttons.

Here is the example: http://jsfiddle.net/My4d4/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

美人如玉 2024-12-19 02:05:15

不要使用 display: tabledisplay: table-cell

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

但是,似乎当 display: table-cell< /code> 元素被隐藏并重新显示,其先前的宽度被计算回单元格的位置以及其当前的宽度,导致奇怪的行为,

我建议使用百分位数宽度,float: left 和默认显示如果您想要一个表格,请使用。如果您想避免使用表格,请避免使用表格并正确执行,

查看我在 jsFiddle 的工作示例

Don't use display: table and display: table-cell

There seems to be a repainting "bug" in Webkit (the rendering engine used by Safari and Chrome), which causes display: table-cell elements to be repainted incorrectly. If the containing div (the one with display: table is hidden, and subsequently re-shown, the items will be painted correctly.

However, it seems that when a display: table-cell element is hidden and re-shown, its previous width is calculated back into the positioning of the cells as well as its current width, resulting in odd behavior.

I would suggest using percentile widths, float: left and the default display. If you want a table, use a table. If you want to avoid tables, avoid tables and do it right.

Please see my working example at jsFiddle

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文