CSS - белый пробел между моим HTML и BODY

Я пытаюсь использовать HTML5 Boilerplate + Normalize.css для моего текущего проекта, и я столкнулся с следующей проблемой.CSS - белый пробел между моим HTML и BODY

Кажется, существует разрыв между моим тегом HTML и тегом BODY. Я попытался выяснить, в чем причина этого, но не удалось после многих попыток.

Должно быть, я пропустил что-то здесь или там.

<!DOCTYPE html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<title>Ridanis | Web Design &amp; Web Development</title> 

<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 

<link rel="stylesheet" href="css/normalize.min.css"> 
<link rel="stylesheet" href="css/main.css"> 

<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
</head> 
<body> 
<!--[if lt IE 7]> 
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> 
<![endif]--> 

<!-- Wrapper/Start --> 
<div class="wrapper"> 
<h1>Hello World!</h1> 
</div> 
<!-- Wrapper/End --> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 

<script src="js/main.js"></script> 
</body> 
</html>

Вот скрипка: http://jsfiddle.net/C7gbC/

Спасибо заранее.

источник

2013-04-19 Khaled

Вы должны знать, что если кто-то использует браузер, то есть не Internet Explorer, скорее всего, для этого браузера не будет HTML-оператора. Страница должна работать в любом случае, но больше не будет действительной HTML. –

Для технической справки: Это называется «смежными полями», см. Http://www.w3.org/TR/CSS21/box.html#collapsing-margins – CBroe

@CBroe: точнее, это явление называется коллапсирующими полями , При определенных обстоятельствах прилегающие поля не могут разрушиться. – BoltClock

normalize.css вставляет поля по умолчанию декларацию о h1 элементов на основе браузера по умолчанию для последовательности:

h1 { 
    font-size: 2em; 
    margin: 0.67em 0; 
}

Если обнулить его вручную (либо в основной таблице стилей или путем изменения normalize.css непосредственно), пробел исчезнет:

h1 { 
    margin: 0; 
}

источник

2013-04-19 09:12:22 BoltClock

Я заменил H1 на тег P, но проблема все еще там. – Khaled

@Khaled: Вот почему я сказал, чтобы удалить маржу вручную. Я не сказал, чтобы изменить 'h1' на' p'. – BoltClock

Тем не менее, ничего не изменилось. – Khaled

Обнаружено, что это моя проблема с «h2» в моем заголовке страницы. То же самое для тега «p» как в iE8, так и в Crome. Просто установите значение поля: 0; для моих тегов «h1» и «p» для некоторых стилей структуры, которые я установил в начале моей страницы main.css. Решение, похоже, работает

источник

2013-05-16 21:38:30 Kane

CSS - белый пробел между моим HTML и BODY

ответ

Смежные вопросы