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。因此，与div的较宽宽度相比，包装器img的较窄宽度使其不做任何操作，只是将其左边缘与包装器的左边缘对齐。 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 的显示问题。由于其他浏览器不需要它，因此应该使用条件注释或其他一些针对此CSS定位IE7的方法。

Answer 2

考虑到您想要做什么，您提供的CSS代码有点奇怪，因为很难计算图像应该放置在具有px中定义宽度的另一个元素附近的固定位置的位置。因此，IE7必须采取行动。

基本上你需要做的是在一面有一列图像，另一面有其他内容。

更新了CSS CODE

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/

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

IE7图像浮动在定位容器中

2 个答案: