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应该是包装器中的顶部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>

Answer 2

我想我已经解决了1）这些变化

.clip drop float right，将position更改为absolute，并赋予它0的权限。

.postheader添加位置相对

.postheader h2宽度约为400px

似乎在IE7和firefox中工作，不知道它在其他浏览器中看起来如何。

IE7溢出＆amp; IE7背景图片

2 个答案: