IE7图像在定位容器中浮动

Question

我试图让图像出现在网站左侧装订线中，因此图像的右侧始终在网站内容旁边可见。这适用于 IE8+ 和其他浏览器，只是不适用于 IE7，它似乎忽略了浮动。

在 IE7 模式下查看（以及 IE8 或 Chrome 或 FF 以获得所需的结果）：http://jsfiddle.net/ehEym/2/embedded/result/ - 基本上图像右侧的蓝条应该在站点旁边可见

包含代码：

<div id="main"><h1>The main content</h1><p>Text</p></div>
<div id="left">
  <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Test_card.png" />
</div>

风格：

#main {
    width:300px;
    margin:0 auto;
    background-color:grey;
}
#left {
    position: fixed;
    display: block;
    top: 0px;
    left: 50%;
    border: 0px;
    margin-left: -350px;
    padding: 0px;
    overflow: hidden;
    z-index: 100000;
    width: 200px;
}
#left img {
    border: 0px;
    float: right;
}

有什么想法吗？

Answer 1

IE7 似乎不允许img 溢出到#left 包装器的左侧，即使它已应用float: right。因此，与 img 的较宽宽度相比，包装器 div 的较窄宽度使其除了将其左边缘与包装器的左边缘对齐之外，无法执行任何操作。 The fix for this can be seen in this fiddle，我添加了一个负数 margin-left 等于 img 宽度：

#left img {
    border: 0px;
    float: right;
    margin-left: -640px; /* <-- equal to img width */
}

我建议仅针对 IE7 进行此操作。虽然它似乎没有对 Firefox 或 IE9+ 产生不利影响（我没有测试 Webkit），它确实导致了 IE8 的显示问题。由于其他浏览器不需要它，因此应该使用条件 cmets 或其他一些针对该 CSS 的 IE7 方法。

Answer 2

考虑到您想要做什么，您提供的 CSS 代码有点奇怪，因为很难计算图像应该将自身放置在哪里，并在另一个具有以 px 为单位定义宽度的元素附近固定位置。 IE7 一定是因为这个原因。

基本上，您需要做的是在一侧有图像的一列，另一侧是其余内容。

更新的 CSS 代码

body {
    height:100%;
}
#main {
    width:80%;
    padding-left:20%;
}
#left {
    position: fixed;
    top:0;
    left:0;
    width:20%;
    height:100%;
}
#left img {
    display:block;
    width:100%;
    height:100%;
}

http://jsfiddle.net/ehEym/4/embedded/result/

这对你有用吗？或者您需要以页面为中心的内容？