Дополнительное пространство между неподвижными и жидкими элементами в IE

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

Он хорошо работает в каждом браузере, кроме IE, где между боковой панелью и областью содержимого добавлено примерно 3 пикселя пробела.

Я не могу воспроизвести проблему в JSFiddle (даже когда я копирую и вставляю свой точный код), поэтому вместо этого я добавил изображения. Первое изображение было отображено в Chrome, а второе - в IE9.

Chrome IE9

CSS (styles.css)

body { 
    margin: 0px; 
} 
#header { 
    width: 100%; 
    height: 150px; 
    background: #F00; 
} 

#sidebar { 
    float: left; 
    width: 280px; 
    height: 1000px; 
    background: #0F0; 
} 

#content { 
    height: 1000px; 
    background: #00F; 
}

HTML

<html> 
<head> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div id="header"></div> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</body>

источник

2012-06-27 David Jones

какая версия IE вы используете? – ply

Версия: 9.0.8112.16421; Обновление версий: 9.0.7 (не уверен, что это значит) –

Вы пытались добавить объявление doctype?

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <link href="styles.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div id="header"></div> 
     <div id="sidebar"></div> 
     <div id="content"></div> 
    </body> 
    </html>

источник

2012-06-27 16:14:53 ply

Это исправлено! Это так странно. Я никогда не понимал декларацию doctype. Я считал, что достаточно отметить тег открытия . Благодаря! –

Да, если doctype опущен, IE возвращается к quirksmode для обратной совместимости, но объявляя, что он должен вести себя так, как ожидалось. Рад, что это сработало! – ply

Дополнительное пространство между неподвижными и жидкими элементами в IE

ответ

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