CSS размещает 3 деления без разрыва между ними в IE 7 и выше

Question

Я пытаюсь создать панель. panelHeader , panelMiddle и panelFooter имеют фоновое изображение высотой 1px и в панелиMddle фоновое изображениеповторяется в y. И в Chrome, и в Mozilla элементы div плавно размещают друг друга без полей. Но в IE (что удивительно!) появляется поле между заголовком и серединой.Любые рекомендации? Спасибо

<div class="panelContainer">
        <div class="panelHeader"></div>
        <div class="panelMiddle">
            test<br/>
            test<br/>
            test<br/>
        </div>
        <div class="panelFooter"></div>
    </div>

РЕДАКТИРОВАТЬ: код CSS

.panelContainer{  
    width: 300px; 
}

.panelHeader{  
    background-image:url(panelHeader.png);

    background-repeat: no-repeat;  
    width: 300px;  
    height: 1px;    
}

.panelMiddle{  
    background-image:url(panelMiddle.png);

    background-repeat: repeat-y;  
    width: 300px;   
}

.panelFooter{  
    background-image:url(panelFooter.png);

    background-repeat: no-repeat;  
    width: 300px;  
    height: 5px;
}

Answer 1

Ваша страница (по-видимому) работала в режиме Quirks.

При поддержке моего комментария "Does your page have a doctype?" (и того факта, что я не смог воссоздать вашу проблему на странице, не в режиме Quirks), вы поняли, чтоэтот факт, и вы смогли решить проблему.

Этот ответ кажется глупым.

Answer 2

Для правильного написания сценариев CSS я всегда сбрасываю весь код CSS.Мой сброс в браузерах будет иметь те же поля и отступы.Некоторые браузеры, такие как IE, автоматически создают поля объявлений, если они не добавляются вручную в ваш скрипт.

Вот мой reset.css:

/* CSS Document */

/* Clear all styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;}

/* remember to define focus styles! */
:focus {
    outline: 0;}

body {
    line-height: 1;
    color: black;
    background: white;}

ol, ul {
    list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table{
    border-collapse: separate;
    border-spacing: 0;}

caption, th, td {
    text-align: left;
    font-weight: normal;}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";}

blockquote, q {
    quotes: "" "";}
/*Ceal all styles END */

Затем в файле вы помещаете эту мету взаголовок:

<link rel="stylesheet" href="css-styles/reset.css" />
<link rel="stylesheet" href="css-styles/all.css" />

Обратите внимание, что css для сброса находится НАД настоящей таблицей стилей.Не стесняйтесь исправлять мой ужасный английский ...

Answer 3

Я бы изменил ваш CSS следующим образом (обратите внимание на значения с плавающей точкой и поля):

.panelHeader{  
    background-image:url(panelHeader.png);
    background-repeat: no-repeat;  
    width: 300px;  
    height: 1px;
    float: left;  
    margin: 0;  
}

.panelMiddle{  
    background-image:url(panelMiddle.png);

    background-repeat: repeat-y;  
    width: 300px; 
    float: left;  
    margin: 0;  
}

.panelFooter{  
    background-image:url(panelFooter.png);
    background-repeat: no-repeat;  
    width: 300px;  
    height: 5px;
    float: left;  
    margin: 0;
}

IE имеет очень странное поведение в отношении полей и отступов, которые даже варьируются между версиями.Я обычно предполагаю, что мне нужно указывать поля и правила заполнения для каждого элемента, если я сначала не установил очень общие правила сброса.