我正在开发我主页的原型(prototype)响应式 wordpress 主题版本。我在主页上遇到了推子问题。
http://dev.epicwebdesign.ca/epicblog/
图片切换时,使用position:absolute叠加图片,然后回到position:relative。
我需要使绝对相对于菜单的左下角而不是#wrap 的左上角,这样它就不会重叠。
我试着把它放在一个容器 div 中,像这样:http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Absolutely-positioned-box-inside-a-box-with-overflow:-auto-or-hidden但这似乎不起作用。
有什么想法吗?
IE 中存在主要的 CSS 兼容性问题,请在 chrome 中尝试。它看起来应该类似于 http://epicwebdesign.ca .当浏览器窗口水平缩小时,整个主题会进行补偿。
最佳答案
您的主要内容向上 float ,因此要解决此问题,我会将导航和内容都展开到 100% 并将它们向左浮动以防止它们重叠。
为您的 id 为“navigation”的元素添加 float:left 样式。
然后,为您的 id 为“wrapper”的元素添加 float:left 和 width:100% 的样式。
我只在 Firefox 中对此进行了测试,因此您可能需要调整一些其他样式才能使其在所有浏览器中正常工作。
关于jquery - 响应式站点上带有推子的奇怪 CSS 定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11166505/