Question

.top_line {
background:#003466;
float:left;
height:107px;
width:100%;
}
.header_logo {
background:url("../images/header.png") top no-repeat;
position: absolute;
height:107px;
width:910px;
}
.page_wrapper {
margin:0px auto;
width:910px;
}

<div class="top_line"></div>
<div class="header_logo" align="center"></div>
<div class="page_wrapper">

在FF，Chrome和较新版本的IE上，标题图像正确显示在背景颜色的顶部。然而，它直接出现在旧版IE上的背景颜色栏的右侧。我该如何解决这个问题？

Answer 1

它是一个IE6问题。

常见的解决方法是添加：

clear: both;

或

clear: left;

或

clear: right;

取决于样式表中的浮动。

像这样添加：

.top_line {
clear: both;
background:#003466;
float:left;

如果不起作用，请尝试：

* {
    margin: 0;
}

有没有。

这些只是我在IE6中解决同一问题所做的一些事情。

Answer 2

我通过将header_logo移动到top_line CSS并最终使用

解决了这个问题

.top_line {
display:inline;
clear: both;
background:#003466;
background-image: url("../images/header.png");
background-position: top center;
background-repeat: no-repeat;
float:left;
height:107px;
width:100%;
}

在旧的IE中定位绝对问题

2 个答案: