IE7 溢出 & IE7 背景图片答案

【问题标题】：IE7 Overflow & IE7 Background ImagesIE7 溢出 & IE7 背景图片
【发布时间】：2012-09-26 00:24:55
【问题描述】：

两个问题，都是IE7引起的

www.myvintagesecret.com

1) 我有一个名为 .postheader 的 div 包含标题和另一个名为 .clip 的 div。如您所见，剪辑应悬停在内容上，而不是向下推。（使用任何其他浏览器进行测试）。它目前给了我一个巨大的差距，它应该只和文本一样长。

.postheader {
    background:url(images/posthead.png) no-repeat;
    min-height:100px;
    max-height:600px;
    padding-right:25px;
    overflow:visible;
}

.clip {
    width:214px;
    height:275px;
    float:right;
    position:relative;

}

有什么想法吗？我可以使最大高度更小，但这会导致 .clip div 被切断。

2) 在侧边栏中，有一堆名为 .sidebaritem 的项目。他们有一个仅在 IE7 中不显示的背景图像。这个我想不通。

.sidebar-item
{
    background:url(images/sidebar.png)top center no-repeat;
    font-size: 12px;
    margin-bottom: 20px;
    padding-left: 18px;
    padding-right:10px;
    padding-top:8px;
    min-height:200px;

}

【问题讨论】：

标签： css internet-explorer-7 internet-explorer background

【解决方案1】：

1) 试试这个。我认为使用 position:absolute 而不是 float:right 可以解决问题。

.postheader {
    background:url(images/posthead.png) no-repeat;
    position:relative;
}

.clip {
    width:214px;
    height:275px;
    position:absolute;
    top:0;
    right:25px;
}

2) 嗯..可能是关闭后的空格).

background:url(images/sidebar.png) top center no-repeat;

3) 对评论的回应：在这种情况下……你应该重做背景。创建仅具有背景的包装器并将您的内容放入其中。 Clip 应该是包装器内的顶部 div 并向右浮动。做类似...

<div class="itemTopBg"><div class="itemBottomBg"><div class="itemLeftBg"><div class="itemRightBg">
  <div class="clip">...</div>
  ... content with no bg... just text...
</div></div></div></div>

【讨论】：

谢谢，这可行，但它与我的文字重叠。由于 div 不会显示每个帖子，因此我无法使文本具有一定的宽度。有什么想法吗？
非常感谢布赖恩。我使用了您的第一个建议和快速破解。一旦我休息一下，就会对你的建议进行编码:)

【解决方案2】：

我想我通过这些更改解决了 1)

.clip drop float right，将位置更改为绝对，并赋予它0的权利。

.postheader 添加相对位置

.postheader h2 宽度约为 400px

似乎可以在 IE7 和 firefox 中使用，但不确定它在其他浏览器中的效果如何。

【讨论】：

并非每个项目都存在剪辑。在 h2 上设置宽度不是一个好主意。没有理由为没有剪辑的项目设置更窄的宽度。如果 h2 是短剪辑，则覆盖下面的文本。我建议按照我的回答中的说明重做带有背景的 div。