Jquery 在 safari 中显示/隐藏
我创建了一个简单的导航栏,使用 Jquery .show() 和 .hide() 显示和隐藏按钮。在 Firefox 中查看时它可以正常工作,但在 Safari 中查看时,每次隐藏/显示按钮时它都会在导航栏中添加额外的空格。
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不要使用
display: table
和display: 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
anddisplay: 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 withdisplay: 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