愚蠢的 webkit 错误 - 刷新与点击更改元素位置
在 webkit 浏览器上查看我正在构建的画廊..
请注意右上角的文字 - available、sold、contact - 它们是
ul {list-style-type: none;} 和 li {float: left;}。单击“可用”，并注意它们水平整齐地对齐。使用后退按钮或单击左上角的“可疑”，它们会在第一页上保持整齐的水平对齐方式。然后刷新浏览器，它又变成垂直的。
.menu ul {
list-style-type: none;
margin: auto;
}
.menu li {
padding: 15px;
float: left;
margin-left: 2px;
margin-right: 2px;
font-size: 20pt;
}
Check out the gallery i'm building on a webkit browser..
notice that the words on the top right - available, sold, contact - which are part of a <ul>, are listed vertically.. even though on Firefox, they are listed horizontally because of ul {list-style-type: none;} and li {float: left;}.
Click "available", and notice that they neatly align horizontally. Use the back button or click "dubious" in the top-left corner and they stay in that neat horizontal alignment on the first page. Then refresh your browser, and it becomes vertical again.
.menu ul {
list-style-type: none;
margin: auto;
}
.menu li {
padding: 15px;
float: left;
margin-left: 2px;
margin-right: 2px;
font-size: 20pt;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
与字体定义一起使用的菜单标题中的字体会导致此问题。
相关主题：使用字体时元素的准确宽度-铬面
您可以尝试使用“display:inline-block”代替“float: left;”
为什么不使用 png 图像作为菜单标题呢？
The font in the menu titles used with font-face definition causes this.
A related topic: Accurate width of element when using font-face in Chromium
You may try "display:inline-block" for li's instead of "float: left;"
And why don't you use png images for menu titles?