我的页面布局在 IE7 中中断,如果我将鼠标悬停在/打开菜单项上,则会自行调整
正如您所看到的,如果您在 IE7/AOL 中访问下面的链接,如果您调整窗口大小,布局就会中断。但是,单击products
菜单选项卡,它就会自行恢复正常。我不知道为什么或如何解决它,而且看起来很草率。在调整页面大小时,徽标和面包屑路径 div 保持在应有的位置,但我的水平导航菜单和面包屑 div 下面的所有内容最终都向右偏离了大约 20-30 像素。在刷新页面、更改页面或打开下拉菜单项时,所有这些都会恢复到正确的对齐方式。
As you can see if you go to the link below in IE7/AOL, the layout breaks if you resize the window. However, click the products
menu tab and it rights itself. I haven't a clue why or how to fix it, and it looks sloppy. On resizing the page, the logo and breadcrumb trail div stay where they ought to be, but my horizontal nav menu and everything below the breadcrumb div end up about 20-30 pixels off to the right. On refreshing the page, changing page, or opening a pull down menu item, it all falls back into the correct alignment.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
它正在正常工作。菜单中的li元素全部浮动到可用空间。如果窗口没有足够的空间,它们将浮动到下一个可用行。这里没什么可看的。
只需使用 CSS min-width 来阻止 DIV 对于菜单来说变得太小。或者考虑采用刚性布局(而不是灵活布局)。
将以下行添加到您的 div 中以使其正常工作。
It is working as it should. The li elements in the menu are all floating to the available space. If the window does not have enough space they will float to the next available line. Nothing to see here.
Just use the CSS min-width to stop the DIV from becoming too small for the menu. Or consider a rigid layout (as oposed to a flexible one).
Add the following line to your div to make it work.
要修复错误渲染(在 ie7 中)的 div(将鼠标悬停在其他内容上、鼠标移出或任何其他奇怪事件后会自行纠正),请使用下面的 jQuery:
逻辑非常简单,我想你可以这样做使用 javascript 的“innerHTML”可以轻松实现。只需重写行为不当的 div 的 html 内容,这将导致它重新计算样式。
至于给 html 或 body 标签赋予 ie7 类,我建议看看 html5boilerplate.com。如果由于某种原因你不能使用他们的解决方案,它的 jquery 是:
To fix incorrectly rendered (in ie7) divs, which correct themselves after hovering over something else, mousing out, or any other weird event, use the below jQuery:
The logic is pretty simple, and I'm imagine you could do it just as easily with javascript's "innerHTML". Just rewrite the html contents of the div that's misbehaving, and this'll cause it to recompute the styles.
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is: