Совместимость 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, вы можете поместить <div> под тегом <body>, затем указать класс для этого div, а затем создать CSS следующим образом:
#container { min-width: 600 пикселей; ширина: выражение (document.body.clientWidth < 600? "600 пикселей": "авто");}
Первая минимальная ширина является нормальной; но ширина во второй строке использует Javascript, который распознается только IE, что также сделает ваш HTML-документ менее формальным. Фактически он реализует минимальную ширину посредством оценки Javascript.