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 создавать элемент больше, чем вы указали.

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

W3C: Recommended list of DTDs

Answer 2

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

Answer 3

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

Answer 4

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

набор:

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

Answer 5

How can I set CSS only for specific IE browsers?

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

работает хорошо.