Opera/IE 和 FF 上的 CSS 列高度不同
感谢所有帮助解决我最后一个问题的人,但我遇到了一个与浏览器无关的新问题:
出于某种原因,我正在处理的网站上的图像导航器(尚未运行)当前未显示在正确的位置火狐。它在 IE8 和 Opera 中出现在正确的位置,但 Firefox 似乎有问题。
如下图所示,imageContainer div(图像和左/右箭头)出现在页脚顶部,这就是它应该的样子,即它在 IE8 和 Opera 中的样子。
但在下图中,imageContainer div 由于某种原因切入页脚 div,我不知道为什么。
imageContainer 有一个 margin-top: 110px;
来将其放置在列底部的正确位置。有 2 列,左侧包含段落和 imageContainer,右侧包含日历和联系方式详细信息。页脚 div 也有 clear: Both;
另外,落入页脚的不仅仅是图像,还有箭头,只是它们的颜色与页脚相同,所以这不会立即出现显而易见。
有什么想法为什么它无法正确显示吗?除了使用 margin-top 来定位它之外,是否有更好的方法将 imageContainer 与其列的底部对齐(以保持网站的框形状)?
提前致谢
Infinitifizz
,
完全忘记了我没有发布该网站的链接,这是我获得一些临时空间来托管它的地方:临时托管
Thanks to everyone who helped with my last question but I've got a new browser-independent problem:
For some reason, the image navigator (not yet functioning) on a website I'm working on is currently not displaying in the correct place on Firefox. It appears in the right place in IE8 and Opera but Firefox seems to have a problem with it.
As can be seen in the below image, the imageContainer div (the image and the left/right arrows) appears on top of the footer, this is how it should look i.e. how it looks in IE8 and Opera.
But in the image below, the imageContainer div is cutting into the footer div for some reason, and I don't know why.
imageContainer has a margin-top: 110px;
to get it in the right place at the bottom of its column. There are 2 columns, the left housing the paragraphs and imageContainer and the right housing the Calendar and contact details. The footer div also has clear: both;
Also, it's not just the image that is falling into the footer, it's the arrows as well only they are the same colour as the footer so this isn't immediately apparent.
Any ideas why it isn't displaying correctly? Is there a better way of aligning the imageContainer to the bottom of it's column (to keep the box shape of the website) other than using the margin-top to position it?
Thanks in advance,
infinitifizz
P.S.
Completely forgotten I hadn't posted the site's link, here is where I got some temp space to host it: Temp Hosting
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
由于无法访问实际站点,所以很难回答,但您可以尝试类似
position:relative; 的方法。 Bottom: 0
将项目放置在底部。Not having access to the actual site makes it difficult to answer, but you could try something like
position: relative; bottom: 0
to place items at the bottom.