Сборник советов по совместимости CSS для браузеров IE и Firefox.

Автор：Eve Cole Время обновления：2010-08-18 17:35:15

Общие советы по совместимости 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, вы можете поместить <div> под тегом <body>, затем указать класс для этого div, а затем создать CSS следующим образом:

#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 id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7. Проблема с прятками IE

Если приложение 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 пикселей; выравнивание текста: центр }
<div id="box">
<p>Содержимое объекта p</p>
</div>

Решение. Добавьте два пустых объекта div выше и ниже CSS-кода P: .1{height:0px;overflow:hidden;} или добавьте атрибут border в DIV.

10.Почему под IE6 появляются пробелы под картинками?

Существует множество способов решения этой ОШИБКИ. Вы можете изменить макет HTML или установить для img значение display:block или установить для атрибута вертикального выравнивания значение вертикального выравнивания: сверху.

нижний средний текст-нижний все можно решить.

11. Как выровнять текст по полю ввода текста

Добавьте вертикальное выравнивание: среднее;

12.Есть ли разница между идентификатором и классом, определенными в веб-стандартах?

(1). Веб-стандарты не допускают повторения идентификаторов. Например, div id="aa" не может повторяться дважды, а class определяет класс. Теоретически его можно повторять бесконечно, поэтому определения требуют нескольких значений. ссылки можно использовать он.

(2).Приоритетный выпуск атрибутов

Приоритет идентификатора выше класса, см. пример выше.

(3). Это удобно для клиентских сценариев, таких как JS. Если вы хотите выполнить операции сценария над объектом на странице, вы можете определить для него идентификатор. В противном случае вы можете найти его, только пройдя по элементам страницы и указав. конкретные атрибуты. Это относительно пустая трата времени и ресурсов, но гораздо менее простая, чем идентификатор.

13. Советы по отображению контента в LI с эллипсами после превышения его длины

Этот метод применим к браузерам IE и OP.

-->
</стиль>

14. Почему IE не может настроить цвет полосы прокрутки в соответствии с веб-стандартами?

Решение — заменить тело на html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

＜/стиль>

15. Почему я не могу определить контейнер высотой около 1 пикселя?

Эта проблема в IE6 вызвана высотой строки по умолчанию, и существует множество методов решения, таких как:
переполнение: скрытый масштаб: 0,08, высота строки: 1 пиксель

16. Как сделать так, чтобы слой отображался во Flash?

Решение — установить прозрачность для FLASH.

17. Как центрировать слой по вертикали в браузере

Здесь мы используем процентное абсолютное позиционирование и технику использования отрицательных значений вне патча. Размер отрицательного значения равен его собственной ширине и высоте, разделенным на два.

Советы по совместимости CSS для Firefox и IE

1. Проблема с центрированием div

Элемент div уже центрирован, если для полей слева и справа задано значение auto. Это не работает с IE. IE необходимо центрировать тело. Сначала определите text-algin: center в родительском элементе. содержимое родительского элемента центрируется.

2. Граница и фон ссылки (тега)

Чтобы добавить к ссылке цвет границы и фона, вам необходимо установить display:block и float: left, чтобы не было разрывов строк. Что касается строки меню, установка высоты строки меню позволяет избежать смещения нижнего края дисплея. Если высота не установлена, в строку меню можно вставить пробел.

3. Проблема в том, что стиль наведения не отображается после перехода по гиперссылке.

Стиль гиперссылки, по которой щелкнули и посетили, больше не имеет наведения и не активен. Многие люди, должно быть, сталкивались с этой проблемой. Решение состоит в том, чтобы изменить порядок атрибутов CSS: LVHA.

Код:

4. Курсор в виде пальца.

курсор: указатель может одновременно отображать форму пальца курсора в IE FF, рука может отображаться только в IE

5. Отступы и поля UL

Тег ul по умолчанию имеет значение заполнения в FF, но в IE только поле имеет значение по умолчанию, поэтому определение ul{margin:0;padding:0;} может решить большинство проблем.

6. Тег ФОРМА

Эта метка автоматически будет иметь некоторые поля в IE, тогда как в FF поле будет равно 0. Поэтому, если вы хотите отображать ее последовательно, лучше всего указать поля и отступы в CSS. Чтобы решить две вышеупомянутые проблемы, мой CSS в целом. , стиль ul, form{margin:0;padding:0;} определяется первым, поэтому вам не придется беспокоиться об этом позже.

7. Проблема несогласованности объяснений модели BOX

Интерпретация модели BOX в FF и IE несовместима, что приводит к разнице в 2 пикселя. Советы по решению: div{margin:30px!important;margin:28px;} Обратите внимание, что IE не может распознавать обратный порядок. важный атрибут, но браузеры не могут его распознать. Итак, в IE это интерпретируется следующим образом:

Если div{maring:30px;margin:28px} определяется повторно, будет выполнен последний, поэтому вы не можете просто написатьmargin:xx px!important;#box{ width:600px; //for ie6.0- w идентификатор: 500 пикселей; // для ff+ie6.0}
#box{ width:600px!important //для ff width:600px; //для ff+ie6.0 width /**/:500px; //для ie6.0-}

8. Селектор атрибутов (это нельзя считать совместимым, это ошибка сокрытия css)

p[id]{}div[id]{}

Это скрыто для IE6.0 и версий ниже IE6.0 и работает в FF и Opera. По-прежнему существует разница между селекторами атрибутов и подселекторами. Область действия подселекторов уменьшена по форме, в то время как область действия атрибута. селекторы относительно большие, например p[id], все теги p с идентификатором имеют один и тот же стиль.

9.Самое безжалостное средство – !важно.

Если действительно нет способа решить некоторые подробные проблемы, вы можете использовать этот метод. FF сначала автоматически проанализирует «!important», но IE проигнорирует его.

.tabd1{
фон:url(/res/images/up/tab1.gif) без повтора 0px 0px !important; /*Стиль для FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* Стиль для IE */};

Стоит отметить, что предложение xxxx !important должно располагаться над другим предложением.

10. Проблема со значениями по умолчанию для IE и FF.

Возможно, вы жаловались на то, почему вам приходится писать разные CSS специально для IE и FF, почему IE — это такая головная боль, а потом во время написания CSS вы проклинаете этот проклятый M$IE. На самом деле в IE нет стандартной поддержки. для CSS, который мы делаем. Это так отвратительно, как вы себе представляете, но главное в том, что значения по умолчанию для IE и FF различны. Как только вы освоите эту технику, вы обнаружите, что написать такой CSS не так уж и сложно. совместим с FF и IE. Возможно, для простого CSS он вообще не нужен» важно».

Мы все знаем, что когда браузер отображает веб-страницу, он решает, как ее отображать, на основе таблицы стилей CSS веб-страницы, но мы не обязательно можем подробно описывать все элементы в таблице стилей, и, конечно, там нет необходимости делать это. Поэтому для тех атрибутов, которые не описаны, браузер будет использовать встроенный метод по умолчанию для отображения, например текста. Если вы не укажете цвет в CSS, браузер будет использовать черный или системный. цвет для отображения фона div или других элементов, если он не указан в css, браузер установит его на белый или прозрачный и т. д. для других неопределенных стилей. Таким образом, основная причина, по которой многие вещи отображаются по-разному в FF и IE, заключается в том, что их отображение по умолчанию различно. Что касается того, как должен отображаться этот стиль по умолчанию, я знаю, есть ли в w3 соответствующие стандарты, оговаривающие это, поэтому нет. Необходимо прокомментировать этот момент. Виноват IE.

11. Почему текст в FF не может увеличивать высоту контейнера?

Контейнеры с фиксированными значениями высоты в стандартных браузерах не будут растягиваться, как в IE6. Итак, если я хочу иметь фиксированную высоту и растягиваться, какие настройки мне следует сделать? Решение состоит в том, чтобы удалить высоту и установить здесь минимальную высоту: 200 пикселей. Чтобы позаботиться о IE6, который не знает минимальной высоты, ее можно определить следующим образом:

{
высота: авто! важно;
высота: 200 пикселей;
минимальная высота: 200 пикселей;
}

12.Как сделать так, чтобы непрерывные длинные поля автоматически переносились в FireFox

Как мы все знаем, в IE вы можете напрямую использовать Word-wrap:break-word. В FF для решения проблемы мы используем технику вставки JS.

<div id="ff">ааааааааааааааааааааааааа</div>

13. Почему ширина контейнера под IE6 отличается от таковой в FF?

Разница в проблеме заключается в том, включает ли общая ширина контейнера ширину границы. Здесь IE6 интерпретирует ее как 200PX, а FF интерпретирует как 220PX. Так что же именно вызывает проблему? Если вы удалите xml в верхней части контейнера, вы обнаружите, что исходная проблема заключается здесь. Оператор вверху запускает режим qurks IE.

<?xml version="1.0"coding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</стиль>
<div ōnclick="alert(this.offsetWidth)">Сделать FireFox совместимым с IE</div>

Появились новые проблемы с поддержкой CSS в IE7.0, которые решаются следующим образом.

Первый тип, CSS HACK

Bpx; /*Для IE7 и IE6*/
_height:20px; /*Для IE6*/

Обратите внимание на порядок.

Следующий пример также представляет собой CSS HACK, но он не такой простой, как приведенный выше.

#example {color: #333 } /* Моз */;
* html #example { color: #666 } /* IE6 */
*+html #example { color: #999 } /* IE7 */

Второй — использовать условные комментарии, специфичные для IE.

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![конец]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![конец]-->

Третий метод — метод CSS-фильтра. Нижеследующее переведено с зарубежных сайтов.

Создайте новый стиль CSS следующим образом:

#элемент {
ширина: 200 пикселей;
высота: 200 пикселей;
фон: красный;
}

Создайте новый div и используйте стиль CSS, определенный ранее:

<div id="item">здесь некоторый текст</div>

Добавьте сюда атрибут lang в исполнении body, по-китайски — zh:

Теперь определите другой стиль для элемента div:

*:lang(en) #item{
фон: зеленый !важно;
}

Это сделано для того, чтобы перезаписать исходный стиль CSS с помощью !important. Поскольку селектор :lang не поддерживается IE7.0, он не окажет никакого влияния на это предложение. Таким образом, достигается тот же эффект в IE6.0. Это очень сложно. К сожалению, Safari также не поддерживает этот атрибут, поэтому вам необходимо добавить следующий стиль CSS:

#item:пустой {
фон: зеленый !важно
}

Селектор :empty является спецификацией CSS3. Хотя Safari не поддерживает эту спецификацию, этот элемент все равно будет выбран. Независимо от того, существует ли этот элемент, теперь он будет отображаться зеленым цветом в браузерах, отличных от IE.

Для совместимости с IE6 и FF можно учитывать предыдущий !важный. Лично я предпочитаю первый, который проще и имеет лучшую совместимость.