Вертикальное пространство между Div в Chrome не IE

0

Здесь обратный один.. IE Работающий в то время как хром не делает! Я получаю странные дополнительные вертикальные промежутки между divs в chrome. IE divs сидят друг против друга, как предполагалось.

Первоначально у меня был атрибут min-height, который вызвал некоторые ошибки с шириной, но взял это. Все еще не совсем уверен, что вызывает проблему с интервалом.

Любая помощь приветствуется! Спасибо всем, -BR

CSS

#container {
width: 100%;
}

#headerout {
width: 100%;
height: 100px;
background: #1240AB;
}

#header {
width: 1000px;
margin: auto;
}

.splitout {
width: 100%;
height: 225px;
}

.split {
width: 1000px;
margin: auto;
}

.content {
width: 750px;
margin: auto;
}

.white {background-color: #DDE3F0;}
.lightblue {background-color: #C9D5F0;}

#footerout {
width: 100%;
height: 30px;
background: #1240AB;
}

#footer {
width: 1000px;
margin-left: 25px;
}

наценка

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset='utf-8'>


</head>
<body>
<div id="container">
    <header>
        <div id="headerout">
            <div id="header">
                <p>Content<p>
            </div>
        </div>
    </header>

    <div class="splitout white">
        <div class="split">
            <div class="content">
                <p>content</p>
            </div>
        </div>
    </div>

    <div class="splitout lightblue">
        <div class="split">
            <div class="content">
                <p>content</p>
            </div>
    </div>
</div>

<div class="splitout white">
    <div class="split">
        <div class="content">
            <p>content</p>
        </div>
    </div>
</div>

</div>
<div id="footerout">
<div id="footer">
    <p>foot</p>
</div>
</div>

</body>
</html>
  • 0
    Попробуй normalize.css
Теги:
google-chrome

2 ответа

2
Лучший ответ

Не используйте css-reset.

Предпочитают normalize.css: http://necolas.github.io/normalize.css/

"причины": qaru.site/questions/15188/...

эта помощь с "ошибками".

  • 0
    Спасибо! Требовалось сочетание двух ответов, но это помогло с горизонтальными проблемами.
1

Вы должны использовать css-reset для полей абзаца (они вызывают это)

http://jsfiddle.net/eUVm8/

Простой пример сброса

* {
  margin: 0;
  padding: 0;
}

Chrome добавляет поля для абзацев по умолчанию.

  • 0
    Не используйте css-reset, прочитайте мой ответ, пожалуйста. :)
  • 0
    Использовал комбинацию обоих. Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню