IE7 CSS проблема с перекрывающимися div - PullRequest
Новая
       3

IE7 CSS проблема с перекрывающимися div

3 голосов
/ 01 февраля 2011

У меня есть эта страница: http://jsfiddle.net/aJNAw/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrapper
{
    width:960px;
    margin:0px auto;
    overflow:hidden;
}

.page_header_billboard
{
    background: #669933;
    height: 376px;
    width:960px;
}
.homebox
{
    float:right;
    clear:right;
    position:relative;
    right:20px;
    top:36px;
    overflow:hidden;
}

.homebox a
{
    background:#ccc;
    display:block;
    width:200px;
    height:100px;
    text-align:center;
    text-decoration:none;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.homebox a:hover
{
    opacity:0.8;
    filter:Alpha(opacity=80);
}

.homebox a span
{
    display:inline-block;
    color:#333;
    line-height:27px;
}

.homebox_middle
{
    margin:1px 0;
}



</style>

</head>

<body>

<div class="wrapper">

    <div class="homebox">
        <a href="#" class="homebox_first"></a>
        <a href="#" class="homebox_middle"></a>
        <a href="#" class="homebox_last"></a>
    </div>
    <div class="page_header_billboard"></div>

</div>



</body>
</html>

, и макет не работает в IE7, но он хорошо работает в других браузерах (chrome, firefox).

Кто-нибудь будетв состоянии помочь?

Ответы [ 4 ]

2 голосов
/ 01 февраля 2011

Добавьте display: inline к вашим поплавкам (дети .wrapper).Принудительное расположение на контейнере путем применения zoom: 1 к .wrapper.

2 голосов
/ 01 февраля 2011

Перемещение <div class="homebox"> внутри <div class="page_header_billboard">.

Демонстрация в реальном времени ( редактировать )

1 голос
/ 01 февраля 2011

У меня нет IE7 для тестирования, но ваша проблема, вероятно, связана с использованием display: inline-block IE7 имеет некоторые проблемы с отображением при использовании inline-block. Это может помочь вам:

http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/

0 голосов
/ 01 февраля 2011

Поместите page_header_billboard вверху и установите на верхнем поле для домашнего ящика значение -376px (высота page_header_billboard).

Это работает в IE6, IE7 и FF3.6. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrapper
{
    width:960px;
    margin:0px auto;
    overflow:hidden;
}

.page_header_billboard
{
    background: #669933;
    height: 376px;
    width:960px;
}
.homebox
{
    margin-top: -376px;
    float:right;
    clear:right;
    position:relative;
    right:20px;
    top:36px;
    overflow:hidden;
}

.homebox a
{
    background:#ccc;
    display:block;
    width:200px;
    height:100px;
    text-align:center;
    text-decoration:none;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.homebox a:hover
{
    opacity:0.8;
    filter:Alpha(opacity=80);
}

.homebox a span
{
    color:#333;
    line-height:27px;
}

.homebox_middle
{
    margin:1px 0;
}



</style>

</head>

<body>

<div class="wrapper">

    <div class="page_header_billboard"></div>
    <div class="homebox">
        <a href="#" class="homebox_first"></a>
        <a href="#" class="homebox_middle"></a>
        <a href="#" class="homebox_last"></a>
    </div>

</div>



</body>
</html>
...