Общие советы по совместимости CSS
Попробуйте написать код в формате xhtml, а DOCTYPE влияет на обработку CSS. Согласно стандарту W3C, необходимо добавить оператор DOCTYPE.
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, вы можете поместить
#container { min-width: 600 пикселей; ширина: exPRession (document.body.clientWidth < 600? "600 пикселей": "авто");}
Первая минимальная ширина является нормальной; но ширина во второй строке использует JavaScript, который распознается только IE, что также сделает ваш HTML-документ менее формальным. Фактически он реализует минимальную ширину посредством оценки Javascript.
6. Плавающий текст IE DIV приводит к ошибке в 3 пикселя.
Объект слева является плавающим, а правый позиционируется с использованием левого поля внешнего патча. Текст внутри объекта справа будет располагаться на расстоянии 3 пикселей от левого края.
#box { float: left; ширина: 800 пикселей;}
#left {плавание: влево; ширина: 50%;}
#right{ширина:50%;}
*html #left{margin-right:-3px; //Это предложение является ключевым}
Если приложение div является сложным, в каждом столбце есть несколько ссылок, и в DIV могут легко возникнуть проблемы с прятками.
Некоторый контент не может быть отображен. Когда мышь выбирает эту область, обнаруживается, что контент действительно находится на странице. Решение. Используйте атрибут line-height для #layout или фиксированную высоту и ширину для #layout. Сохраняйте структуру страницы максимально простой.
8. Плавающий элемент закрыт; очистка адаптивной высоты;
①Например: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >Здесь NOTfloatC не хочет продолжать перевод, а хочет расположиться вниз. (Свойства floatA и floatB установлены на float:left;)
Этот код отлично работает в IE, проблема в FF. Причина в том, что NOTfloatC не является меткой с плавающей запятой, и метка с плавающей запятой должна быть закрыта. Добавьте <#div class="clear"> между <#div class="floatB"> <#div class="NOTfloatC">. Этот элемент div должен учитывать свою позицию, и он должен совпадать с двумя элементами div с. Атрибуты float. Между уровнями не может быть вложенных отношений, иначе возникнет исключение. Определите стиль очистки следующим образом: .clear{clear:both;}
② Не устанавливайте высоту div как внешнюю оболочку. Чтобы обеспечить автоматическую адаптацию высоты, добавьте overflow:hidden в оболочку; если она содержит поле с плавающей запятой, автоматическая адаптация высоты в IE недействительна. время IE должен быть активирован. Приватный атрибут макета (злой IE!) можно сделать с помощью Zoom:1;, таким образом обеспечивая совместимость.
Например, оболочка определяется следующим образом:
.colwrapper{переполнение: скрытый; масштаб: 1; поле: 5 пикселей авто;}
③Для верстки мы чаще всего используем CSS-описание float:left. Иногда нам нужно создать единый фон позади элемента div с плавающей запятой в столбце n, например:
Например, мы хотим установить синий фон страницы, чтобы цвет фона всех трех столбцов был синим. Однако мы обнаружим, что по мере того, как левый центральный правый угол растягивается вниз, страница фактически сохраняет ту же высоту. Проблема. Причина в том, что страница не является атрибутом с плавающей запятой, и нашу страницу нельзя установить как плавающую, потому что ее необходимо центрировать, поэтому мы должны решить эту проблему следующим образом.
Решение состоит в том, чтобы встроить плавающий левый элемент DIV шириной 100%.
④Универсальное поплавковое закрытие (очень важно!)
Принцип очистки плавающего элемента описан в разделе [Как очистить плавающие элементы без структурной разметки]. Добавьте следующий код в Global CSS и добавьте class="clearfix" в элемент div, который необходимо закрыть. Это работает каждый раз.
/* Очистить исправление */
.clearfix: after {content:"."; дисплей: блок; высота: 0; видимость: скрыто }
.clearfix { display:inline-block;
/* Скрыть из IE Mac */
.clearfix {дисплей: блок;}
/* Завершить скрытие из IE Mac */
/* конец ClearFix */
Или установите его так: .hackbox{ display:table //Отображение объекта как таблицы уровня элемента блока}
9. Высота не регулируется
Неадаптивная высота означает, что внешняя высота не может автоматически корректироваться при изменении высоты внутреннего объекта, особенно когда внутренний объект использует поле или отступ.
пример:
#box {цвет фона:#eee }
#box p {маржа-верх: 20 пикселей; маржа-дно: 20 пикселей; выравнивание текста: центр }
Содержимое объекта p
Решение. Добавьте два пустых объекта div выше и ниже CSS-кода P: .1{height:0px;overflow:hidden;} или добавьте атрибут border в DIV.
10.Почему под IE6 появляются пробелы под картинками?
Существует множество способов решения этой ОШИБКИ. Вы можете изменить макет HTML или установить для img значение display:block или установить для атрибута вертикального выравнивания значение вертикального выравнивания: сверху.
нижний средний текст-нижний все можно решить.
11. Как выровнять текст по полю ввода текста
Добавьте вертикальное выравнивание: среднее;