1. «Использование важного в IE6 и FF»
.box1 {ширина:150 пикселей !важно;}
.box1 {ширина:250 пикселей;}
!important означает, что этот параметр имеет приоритет. IE не выдаст ошибку при обнаружении !important и просто проигнорирует его функцию. Если ширина будет установлена позже, IE примет в качестве критерия последнюю установленную ширину. он будет использовать текущее значение, которое является предыдущим значением !important. Например: #test {width: 300px !important} И IE, и FF отображают 300 пикселей. Если в конце есть значение, IE отобразит следующее значение, а FF отобразит значение с !import впереди!
Другие браузеры считают это важным. Из-за соотношения приоритетов всегда преобладает ранее установленная ширина.
#test {ширина:300 пикселей;ширина:400 пикселей !важно;}
Результат, отображаемый в этом предложении, заключается в том, что ширина IE и FF равна 400PX.
#test {ширина:300 пикселей !важно;ширина:400 пикселей;}
Результат отображения этого предложения: FF: 300 пикселей IE: 400 пикселей.
Поэтому, используя !important, ставьте слова, содержащие !important, впереди.
Но проблема возникает снова, IE7 уже может распознать! Важно, см. Ниже!
2. Стили CSS для Firefox ie6 ie7
В настоящее время большинство из них используют !important для взлома. Тесты ie6 и firefox могут отображаться нормально, но ie7 может правильно интерпретировать !important, что приведет к тому, что страница не будет отображаться должным образом! Я нашел хороший хак для IE7, используя «*+html». Теперь просмотрите его с помощью IE7, и проблем не должно быть.
Теперь напишите такой CSS:
#1 { цвет: #333 } /* Моз */;
* html #1 { цвет: #666 } /* IE6 */;
*+html #1 { цвет: #999 } /* IE7 */
Тогда цвет шрифта отображается как #333 в Firefox, #666 в IE6 и #999 в IE7. Вы можете использовать «+» для реализации CSS Hack, который распознается только IE. Некоторые друзья могут подумать об использовании «_» Hack. , но они различаются, поскольку «_» не распознается в IE7. Так что используйте +
Результаты испытаний:
Браузеры IE5.5, IE6 и IE7 могут его распознать;
Браузеры FF2.0, Opera 9 и Safari 2 не распознают его.
3. Взлом IE7
В IE7 исправлено множество ошибок и добавлена поддержка некоторых селекторов, поэтому теперь хаки для скрытия или отображения IE, такие как *html {}, html>body {}, !important и т. д., не будут работать в IE7. Хотя CSS Hack не рекомендуется, а условные комментарии являются надежным фильтром, условные комментарии могут появляться только в HTML, поэтому CSS Hack все еще имеет свое место. Nanobot обнаружил несколько CSS-хаков для IE7, а именно:
>тело
HTML*
*+html
Из этих трех методов записи первые два являются незаконными методами записи CSS и игнорируются в браузерах, соответствующих стандартам, но IE7 так не считает. Для >body он заменит отсутствующий селектор глобальным селектором *, то есть он будет обработан в *>body, и это явление также существует не только для селектора >, но и для селекторов + и ~. Для html*, поскольку между html и * нет пробела, это тоже синтаксическая ошибка CSS, но IE7 ее не проигнорирует, а ошибочно полагает, что здесь есть пробел. Для третьего типа *+html IE7 считает, что объявление DTD перед html также является элементом, поэтому среди этих трех методов только этот метод является допустимым для написания CSS, что означает, что он может пройти валидатор. Таким образом, проверка также является хакерским методом, рекомендованным автором.
Интернет Эксплорер 6 и ниже
Используйте * html {}, чтобы выбрать элемент html.
IE 7 и ниже
Используйте *+html, * html {}, чтобы выбрать элемент html.
только ИЕ 7
Используйте *+html {}, чтобы выбрать элемент html.
Только IE 7 и современные браузеры
Используйте html>body {}, чтобы выбрать элемент body.
Только современные браузеры (не IE 7)
Используйте html>/**/body {}, чтобы выбрать элемент body.
4. IE и FF по-разному интерпретируют блочную модель. Описание кода: #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff;
Пропускная способность, отображаемая тестом, составляет 650 пикселей.
Общая ширина IE Box равна сумме ширин width+padding+border+margin. Общая ширина FF Box — это ширина width, а ширина отступов+border+margin включена в ширину.
Если есть BOX{WIDTH:"300"; PADDING:"5PX";}, ширина BOX в IE должна быть: 310. Ширина FF равна 300, поэтому, когда BOX заполнен, вы должны использовать BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}, чтобы гарантировать, что ширина BOX всегда равна 300 пикселей, и Не будет никакого явления растяжения, и в FF не будет ситуации, когда плавающий слой не будет полностью заполнен.
5. Тег ul имеет значение заполнения в Mozilla, но в IE имеет значение только поле.
Установить ul{margin:0;padding:0}
6. ИЭ не может отличить отношения наследования от отношений отца и сына. Все они являются отношениями наследования.
7. Установка отступов для элемента div в FF приведет к увеличению ширины и высоты, но не к IE (можно решить с помощью !important).
8. Проблема центрирования
1. По центру по вертикали. Установите line-height на ту же высоту, что и текущий элемент div, а затем передайте вертикальное выравнивание: middle (будьте осторожны, чтобы не переносить содержимое).
2. По горизонтали по центру: 0 авто (конечно, не универсально).
3. Если вам нужно добавить стили к содержимому тега a, вам необходимо установить display:block (обычно в тегах навигации);
4. Разница в понимании BOX между FF и IE приводит к разнице в 2 пикселя и таким проблемам, как отступ элемента div, установленного на плавающее значение, удваивающийся под IE.\
5. Различные характеристики UL:
Тег ul по умолчанию имеет стиль списка и отступы. Лучше объявить его заранее, чтобы избежать ненужных проблем (обычно в тегах навигации и списках контента).
6. Не устанавливайте высоту div как внешнюю обертку. Лучше всего добавить overflow: скрытый, чтобы добиться адаптации высоты.
9. Что касается курсора в виде руки, он применим только к IE. Если его распознают и IE, и FF, используйте курсор: указатель.