Советы по совместимости CSS (IE и Firefox)

Совместимость CSS с браузерами иногда вызывает у людей головную боль. Возможно, когда вы поймете приемы и принципы, мне не составит труда собрать в Интернете советы по совместимости IE7, 6 и Fireofx и разобрать их. Для перехода на web2.0 попробуйте написать код в формате xhtml, а DOCTYPE влияет на обработку CSS. Согласно стандарту W3C, необходимо добавить оператор DOCTYPE.

Советы по CSS

1. Проблема вертикального центрирования div

вертикальное выравнивание: средний; Увеличьте межстрочный интервал до той же высоты, что и вся строка DIV: 200 пикселей. Затем вставьте текст, и он будет центрирован по вертикали. Недостаток в том, что вам нужно контролировать содержимое, а не переносить его на другую строку.

2. Проблема удвоения маржи

Поля, установленные для плавающего элемента div, будут удвоены в IE. Это ошибка, которая существует в ie6. Решение состоит в том, чтобы добавить display:inline; внутри этого div.

Например:

<#div id="imfloat">
Соответствующий CSS
#imfloat{
плавать: влево;
Margin:5px;/*В IE под этим понимается 10px*/
display:inline;/*В IE это будет пониматься как 5 пикселей*/}

3. Двойное расстояние, создаваемое плавающим т.е.

#box{ float:left; width:100px;margin:0 0 0 100px; //В этом случае IE создаст расстояние в 200 пикселей display:inline;

Давайте подробно поговорим о двух элементах: блочном и встроенном. Характеристика блочного элемента заключается в том, что он всегда начинается с новой строки, а высоту, ширину, высоту строки и поля можно контролировать (характеристика блочного элемента); встроенный элемент — это тот и другой. Элементы находятся на одной строке и не могут контролироваться (встроенные элементы);

#box{ display:block; //Вы можете моделировать встроенные элементы как элементы блока display:inline; //Достичь эффекта расположения в одной строке diplay:table;

4 проблемы IE с шириной и высотой

IE не распознает определение min-, но на самом деле он обрабатывает нормальную ширину и высоту так, как будто существует min. Это большая проблема. Если вы используете только ширину и высоту, эти два значения не изменятся в обычном браузере. Если вы используете только минимальную ширину и минимальную высоту, ширина и высота вообще не задаются. под ИЕ.

Например, если вы хотите установить фоновое изображение, эта ширина более важна. Чтобы решить эту проблему, вы можете сделать это:

#box{ ширина: 80 пикселей; высота: 35 пикселей;}html>body #box { ширина: авто; высота: авто; минимальная высота: 35 пикселей;}

5. Минимальная ширина страницы

min-width — очень удобная команда CSS. Она может указать, что минимальная ширина элемента не может быть меньше определенной ширины, чтобы макет всегда был правильным. Но IE этого не распознает и фактически считает ширину минимальной. Чтобы сделать эту команду доступной и в IE, вы можете поместить