Макет поврежден после удаления шрифтов во всех браузерах - PullRequest
Новая
       29

Макет поврежден после удаления шрифтов во всех браузерах

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

Ниже приведен простой макет.Мне нужна помощь с этим, потому что когда я масштабирую шрифт в браузерах, нажимая CTRL и прокручивая вверх (масштабирование), тогда этот макет не ведет себя так, как я ожидал.тело, поэтому белый фон будет на всю ширину.Если вы достаточно измените масштаб шрифта и появится горизонтальная полоса прокрутки, попробуйте выполнить прокрутку вправо, и вы заметите, что allWrapper меньше, чем body, и цвет тела отображается вместо белого.Я не могу сделать тело белым, потому что нижний колонтитул тоже будет в этом цвете (не белый).Вот краткий код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div,body{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
body{font-family:Arial,sans-serif;background-color:#066789;}
#allWrapper{background-color:white;}
#header .content {height:90px;background-color:white; position:relative;}
#mainWrapper{margin-top:0.5em; line-height:1.5;}
.center {width:980px;margin:0px auto;}
</style>
</head>
<body>
<div id="allWrapper">
<div id="header">
    <div class="center">
        <div class="content">
        HEADER
        </div>
    </div>
</div>
<div id="content">
    <div id="mainWrapper">
        <div class="center">
            <div class="content">MAIN CONTENT</div>
        </div>
    </div>
</div>
</div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 26 января 2012

Добавьте следующее к #allWrapper: 

min-width:980px;

Проблема в том, что элементы html / body составляют 100% видимого экрана (не весь макет), и #allWrapper остается в них. Та же проблема может быть замечена, если размер браузера уменьшен до 980px. Добавляя min-width к #allWrapper, он заставляет #allWrapper оставаться столь же широким, как и содержащаяся коробка. Если вы предпочитаете, min-width может быть добавлено к body.

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

Попробуйте использовать процент вместо точных пикселей, в этом случае.

Примерно так: 

.center {width:80%;margin:0px auto;}
...