IE7 CSS 浮动与其他所有内容（Webkit、IE8/9 等）的行为不同
好的，我有一个包含各种嵌套 div 的布局。
本质上，我有一个带有居中内容区域的左图像背景和一个右图像。
我希望图像尽可能接近内容，无论页面宽度如何。所以在这种情况下，左图像向右浮动。我使用边距是为了将左侧图像与内容的左侧正确对齐。
CSS
.left {
left: 0;
}
.column_left {
width: 50%;
position: absolute;
top: 0;
text-align: right;
}
#leftcol {
margin-right: 471px;
float:right;
}
HTML：
<div class="left column_left" style="height: 100%; overflow: hidden; z-index: -1;">
<div id="leftcol" style="height: 100%; min-width: 471px;">
<div style="width: 770px; height: 646px; background-image: url("myimage"); background-repeat: no-repeat;"/>
如果我使用除 IE7 之外的任何浏览器并缩小浏览器窗口，左侧图像将从左侧开始正确隐藏。
在 IE7 中，内容 div 将与图像重叠，而不是将图像从屏幕左侧溢出。
如何在 IE7 中解决此问题？
这是该问题的一个工作示例：http://www.ottawatravellers.ca
Okay, so I have a layout with various divs which are nested.
Essentially, I have a left image background with a centered content area and a right image.
I would like to have the images as close to the content as possible, regardless of the width of the page. So the left image is floating right in this case. I'm using margins in order to properly line up the left image with the left hand side of the content.
CSS
.left {
left: 0;
}
.column_left {
width: 50%;
position: absolute;
top: 0;
text-align: right;
}
#leftcol {
margin-right: 471px;
float:right;
}
HTML:
<div class="left column_left" style="height: 100%; overflow: hidden; z-index: -1;">
<div id="leftcol" style="height: 100%; min-width: 471px;">
<div style="width: 770px; height: 646px; background-image: url("myimage"); background-repeat: no-repeat;"/>
If I use anything except IE7 and shrink my browser window, the left image will properly hide starting from the left hand side.
In IE7 the content div will overlap the image instead of overflowing the image off of the screen to the left.
How can I fix this in IE7?
Here's a working example of the problem: http://www.ottawatravellers.ca
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在图像的 css 中尝试以下操作：
Try this within the css for the image: