IE пространство под изображением?

Question

Как я могу исправить эту страницу для Internet Explorer? Кажется, по какой-то причине под фоновые изображения добавляется пробел.

http://orangeguy.biz/profile/

Дизайн такой:

                 ------------------
                 |   TOP IMAGE    |<- base_top.png
                 ------------------
                 |  |          |  |
base_sides.png ->|  | CONTENT  |  |<- base_sides.png
                 |  |          |  |
                 |-----------------
                 |  BOTTOM IMAGE  |<- base_bottom.png
                 ------------------

Answer 1

Это потому, что у IE странная идея, что каждый элемент должен иметь высоту хотя бы одного символа.

Если вы добавите overflow:hidden; к стилям #top и #bottom, это не позволит IE сделать элемент больше, чем вы указали.

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

W3C: рекомендуемый список DTD

Answer 2

IE имеет значения по умолчанию font-size и line-height потому что высота изображения немного меньше IE по умолчанию font-size и line-height.

комплект:

font-size:0 
line-height:0 
overflow:hidden

Answer 3

Как настроить CSS только для определенных браузеров IE?

font-size: 0\9;
line-height: 0\9;

тоже работает.

Answer 4

Я бы предложил выставить маржу: 0; и отступы: 0; в объявлении таблицы стилей * (все) элементы вверху. Так что проблема больше не возникнет. Могу ли я предложить что-то еще? Для выравнивания элементов по центру я бы предпочел margin-left: auto; и поле справа: авто; согласно предложению W3.org: http://www.w3.org/Style/Examples/007/center

Answer 5

Вам нужно явно указать img {margin-bottom:0;} в вашем css. IE автоматически создает буфер вокруг изображений, но он должен прислушиваться к правилам таблицы стилей.