奇怪的 CSS 问题 - 为什么这在 Google Chrome 中看起来不正确?
有问题的页面在这里:http://www.allweatherwood.com/test-page/
如果您在 Internet Explorer 或 Firefox 中查看它,您应该会发现它看起来非常好。但在 Chrome 中,由于某种原因,它是一种完全不同的动物。世界上到底发生了什么事?导航区域似乎略有下降,这导致了主要内容区域移动到页面右侧的奇怪问题?为什么只显示该区域的一小部分?我确实被难住了。尝试查看代码,但我无法弄清楚问题出在哪里。
CSS 可以在这里找到: http://www.allweatherwood.com/wp -content/themes/allweatherwood/style.css
非常感谢对此的任何帮助!
The page in question is here: http://www.allweatherwood.com/test-page/
If you look at it in Internet Explorer or Firefox, you should find that it looks perfectly fine. But in Chrome, for some reason, it is a completely different animal. What in the world is going on? It looks like the navigation area is getting bumped down slightly, and that is causing the strange issue with the main content area being moved to the right side of the page? And why is only a small sliver of that area being shown? I am positively stumped. Have tried looking at the code and I just can't figure out where the issue is.
CSS can be found here: http://www.allweatherwood.com/wp-content/themes/allweatherwood/style.css
Any help on this is MUCH appreciated!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您将
width: 960px;
甚至width:inherit
设置为您的content-wrapper
div,它看起来没问题。无论出于何种原因,当溢出设置为隐藏时,webkit 都不会按照预期的方式计算该 div 的宽度。也许有人确切地知道为什么?
If you set
width: 960px;
or evenwidth: inherit
to yourcontent-wrapper
div it looks alright. For whatever reason, webkit isn't calculating the width of that div they way it's expected when it's overflow is set to hidden.Perhaps someone knows exactly why?
主菜单中的元素都是
float:left
,因此内容浮动到这些元素上。 插入在标题后面
以阻止其他元素浮动。顺便说一句,如果您将 HTML 声明为 XHTML 1.0,请提供 有效 XHTML 1.0。
The elements in the main menu are all
float:left
, and so the content floated on to these elements. Insertafter the header to stop further elements from floating.
By the way, if you declare your HTML as XHTML 1.0, please serve valid XHTML 1.0.