css - IE7 溢出和 IE7 背景图片

Question

两个问题，都是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;

}

Answer 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 应该是 wrapper 里面最上面的 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>