CSS простая проблема с плавающей точкой в ​​режиме совместимости IE - PullRequest
Новая
       33

CSS простая проблема с плавающей точкой в ​​режиме совместимости IE

0 голосов
/ 25 января 2011

Я пытаюсь получить два бокса рядом (левое меню размером 200 пикселей, а рядом с ним - область основного содержимого с оставшейся шириной 100%).

Отлично работает во всех браузерах, но многонаши клиенты используют IE6 (к сожалению, мы ничего не можем с этим поделать), поэтому он должен поддерживать режим совместимости IE.К сожалению, этот простой CSS не работает!Может ли кто-нибудь помочь мне без необходимости возвращаться к таблицам?

Соответствующий CSS: 

.clear {
    clear:both;
}

/* Left menu */
.leftMenu{
    width: 200px;
    border:1px solid green;
    height:100px;
    float:left;
}

/* Main Content area */
.mainBox{
    width:100%;
    border:1px solid red;
}
.mainWrapper{
}




<!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><title>



</title><link rel="stylesheet" type="text/css" href="css/default.css" /></head>



<body>

    <form name="form1" method="post" action="default.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIwNjAyODU4M2Rk5phxJ78Kc9Kf0nXvcJ7j7tQJPxw=" />

</div>

    <div class="mainWrapper">

        <div class="leftMenu">

        left

        </div>

        <div class="mainBox">

        main

        </div>

        <div class="clear"></div>

    </div>



    </form>

</body>

</html>

1 Ответ

2 голосов
/ 25 января 2011

У меня нет IE6, поэтому не могу проверить, но все равно.Попробуйте удалить width: 100% из .mainBox, а также удалить все границы и вместо этого использовать цвет фона для тестирования.Таким образом, он работает в стандартах IE7.

.mainBox - это DIV, у которого нет плавающих значений, поэтому он неявно имеет ширину 100%.Также границы добавляют к ширине, что может привести к неожиданному поведению при тестировании.

...