Верхнее поле можно удалить в Safari, но не в Firefox - PullRequest
Новая
       36

Верхнее поле можно удалить в Safari, но не в Firefox

0 голосов
/ 29 марта 2012

Я создал простой макет, используя тег HTML div. Я хотел бы, чтобы в верхней части моей страницы не было НИКАКОГО поля (т.е. без пробелов). Я могу добиться этого в Safari, но по какой-то причине тот же HTML-код не разрезает его в Firefox. Вот jsfiddle моего HTML-кода: http://jsfiddle.net/WhaGH/

Вы не можете увидеть его в jsfiddle, но если вы скопируете и вставите код в HTML-документ, а затем откроете его с помощью Firefox, то в верхней части страницы появится поле высотой около 21 пикселя. Это верхнее поле не появляется, если вы открываете тот же HTML-файл в Safari. Я читал где-то еще, что разные браузеры используют различное количество полей и отступов по умолчанию с тегами «html» и «body», поэтому я включил немного CSS в «head», который устанавливает для полей и отступов эти теги равные 0. это работает для Safari, но не для Firefox (точнее, оно работает для левого поля, но не для верхнего поля в Firefox). Кто-нибудь знает почему?

Ответы [ 4 ]

1 голос
/ 29 марта 2012

Вы не очистили свой заголовок (добавьте одно переполнение свойств: скрытый;) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body style="width: 800px;">


<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;">
<h1>This is the Header.</h1>
</div>
<div id="leftcolumn" style="width:199px;  height: 500px; background-color: red; float:left; border-right: solid black 1px;">
<p>This is the left column.</p>
</div>
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;">
<p>This is where the content goes.</p>
</div>
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;">
<p>This is the right column.</p>
</div>


</body>
</html>
1 голос
/ 29 марта 2012 
<style type="text/css">
    body { margin: 0; padding: 0; }
    h1 { margin: 0; }
</style>
1 голос
/ 29 марта 2012

по умолчанию Firefox использует margin-top: 21,4333px для тега, и к div # заголовок добавляется к отступу.

Используйте padding-top для дочерних элементов блока, чтобы предотвратить это. 

h1 { margin-top: 0px; }

Исправьте эту проблему.

1 голос
/ 29 марта 2012

Вы сделали сброс значений по умолчанию только для body и html, сделайте это и для других элементов.Возможно, вы захотите использовать в будущем сброс CSS, посмотрите HTML5 Boilerplate

http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/

...