1. CSS HACK
Следующие два метода могут решить практически все сегодняшние HACK:
1. !important
Благодаря поддержке !important в IE7, метод !important теперь предназначен только для HACK в IE6 (обратите внимание на то, что написано. Помните, что требуется позиция объявления. необходимо заранее.)
<style>
#wrapper
{
width: 100px!important;
width: 80px;
</style>
2.
IE6/IE77 для FireFox
*+html и *html — это теги, специфичные для IE, которые не поддерживаются. еще от Firefox. И *+html Это уникальный тег для IE7.
<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px; }
}
</style>
Примечание.
*+html HACK для IE7 должен гарантировать наличие следующего оператора в верхней части HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
2. Универсальное закрытие поплавков.
Принцип очистки поплавков см. в разделе [Как очистить поплавки без структурной разметки].
Добавьте следующий код в Глобальный CSS и добавьте class="clearfix" в div, который нужно закрыть. Это работает каждый раз
.
.clearfix
:after
{
content:".";
display
:block;
очистка
:
оба;
видимость:
скрыто
;
.clearfix {дисплей: блок;}
</style>
3. Другие советы по совместимости
1. Установка отступов в элементе div под FF приведет к увеличению ширины и высоты, а в IE - нет (может быть решено с помощью !important).
2.
Центрирование по вертикали. line- Высота устанавливается на ту же высоту, что и текущий элемент div, а затем выравнивается по вертикали: по середине (будьте осторожны, чтобы не переместить содержимое.)
2) Отцентрируйте его по горизонтали: 0 auto; не всесилен)
3. Если нужно добавить контент в тег a Для верхнего стиля нужно установить display:block (обычно в тегах навигации)
4. Разница в понимании BOX между FF и IE приводит к 2px. разница и такие проблемы, как удвоение поля div с плавающей запятой в IE
5. Тег ul находится в FF. Ниже по умолчанию указаны стили списка и заполнение. Лучше объявить это заранее, чтобы избежать ненужных проблем. Обычно используется в тегах навигации и списках контента.
6. Не устанавливайте высоту div как внешнюю обертку. Лучше всего добавить overflow: скрытый. Для достижения высокой степени адаптивности.
7. О курсоре-руке: указатель. И рука применима только к IE
1. Большинство стилей CSS для Firefox ie6 и ie7
теперь взломаны с помощью !important. Для тестов ie6 и firefox это может быть нормально,
но ie7 может правильно интерпретировать !important. приведет к тому, что страница не будет отображаться должным образом! Я нашел хороший хак
для
IE7, используя «*+html». Теперь просмотрите его с помощью IE7, и проблем не должно быть.Теперь напишите такой CSS:
#1 { color: #333; }
* html #1 { color: #666 } *
+html #1 { color: #999 }
Тогда цвет шрифта будет отображаться как #333 в Firefox. Цвет шрифта — #666 в IE6 и #999 в IE7.
2Основное определение стиля для
проблем с центрированием в макете CSS
выглядит следующим образом:body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto }
Описание:
Сначала определите TEXT-ALIGN для родительского элемента; element: center; Это означает, что содержимое родительского элемента центрировано, этого параметра достаточно для IE;
Но его нельзя центрировать в Mozilla. Решение состоит в том, чтобы добавить «MARGIN-RIGHT: auto;MARGIN-LEFT: auto;» при установке дочернего элемента.
Следует отметить, что если вы хотите использовать этот метод для центрирования всей страницы, не рекомендуется его устанавливать. в DIV вы можете последовательно разделить несколько элементов div,
просто определите MARGIN-RIGHT: auto;MARGIN-LEFT: auto; в каждом разделенном div.
3 Различные интерпретации блочной модели
#box{ width:600px; //для ie6.0- width:500px; //для ff+ie6.0}
#box{ width:600px!important //для ff width: 600px; //для ff+ie6.0 width:500px; //для ie6.0-}
4 Двойное расстояние, создаваемое плавающим значением ie
#box{ float:left; width:100px; //This kind При таких обстоятельствах IE будет генерировать расстояние в 200 пикселей display:inline; //Игнорировать число с плавающей запятой} Давайте
подробно поговорим о двух элементах: блоковом и встроенном. Характеристики элемента Block: всегда начинать с новой строки, высоты.
, ширина, высота строки, поля можно контролировать(
блочные элементы); характеристики встроенных элементов: находятся в той же строке, что и другие элементы,... нельзя контролировать (встроенные элементы);
/могут быть встроенными элементами Имитировать как блочный элемент display:inline; //Достичь эффекта расположения в одной строке diplay:table;
IE не распознает определение min-, но на самом деле он воспринимает нормальную ширину и высоту, как если бы это было так. есть мин. Это большая проблема. Если вы используете только ширину и высоту,
эти два значения не изменятся в обычном браузере. Если вы используете только минимальную ширину и минимальную высоту, ширина и высота вообще не задаются. под ИЕ.
Например, если вы хотите установить фоновое изображение, эта ширина более важна. Чтобы решить эту проблему, вы можете сделать это:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }
6 страницы Минимальная ширина
min-width — очень удобная команда CSS. Она может указать, что минимальная ширина элемента не может быть меньше определенной ширины, чтобы гарантировать, что макет всегда правильный. Но IE этого не распознает
и фактически считает ширину минимальной. Чтобы эта команда работала в IE, вы можете поместить <div> под тегом <body>, а затем указать класс для div:
Затем создайте CSS следующим образом:
#container{ min-width: 600px width; :expression (document.body.clientWidth < 600? "600px": "auto" );}
Первая минимальная ширина является нормальной; но ширина в строке 2 использует Javascript, который распознается только IE, что также заставит вас работать. HTML-документ не очень формален. Фактически он реализует минимальную ширину посредством оценки Javascript.
Его также можно записать напрямую как:
#container {минимальная ширина: 600 пикселей * ширина: 600 пикселей;}
Таким образом, минимальная ширина составляет 600 пикселей независимо от IE или FF.
7 Очистите плавающий
.hackbox{ display:table; //Отображаем объект как таблицу уровня элемента блока} или .hackbox{clear:both;}
или добавьте. : after (псевдообъект), устанавливает содержимое, которое появляется после объекта, обычно используется вместе с содержимым. IE не поддерживает этот псевдообъект и не поддерживается браузерами Ie,
поэтому он не влияет на браузеры IE/WIN. Самая неприятная вещь в этом... #box:after{content: "."; display: block; height: 0; ясно: обе; видимость: скрыто;}
8 DIV плавающий текст IE создает 3 пикселя
Объект слева сторонаошибки
плавающая, а правая сторона располагается по левому краю внешнего патча. Текст в правом объекте будет находиться на расстоянии 3 пикселей от левой стороны.
#box{ float:left; width:800px;}# left{ float:left; width:50 %;}#right{ width:50%;}*html #left{margin-right:-3px; //Это предложение является ключевым}
HTML-код<div id="box" > <div id="left">< /div> <div id="right"></div></div>
9 Селектор атрибутов (это нельзя считать совместимым, это ошибка сокрытия CSS)
p[id ]{}div[id]{}
Это для IE6.0, а версии ниже IE6.0 скрыты.
В FF и OPera по-прежнему существует разница между селекторами атрибутов и подселекторами. Форма, хотя область действия селекторов атрибутов относительно велика, например, p. В [id] все теги p с идентификаторами имеют один и тот же стиль.
10 Проблема пряток в IE
Когда приложение div сложное, есть некоторые ссылки. в каждом столбце, например DIV. В это время легко возникает проблема пряток.
Некоторый контент не может быть отображен. Когда мышь выбирает эту область, обнаруживается, что контент действительно находится на странице.
Решение. Используйте атрибут line-height для #layout или фиксированную высоту и ширину для #layout. Сохраняйте структуру страницы максимально простой.
11 Неадаптация высоты
Неадаптация высоты означает, что высота внешнего слоя не может автоматически регулироваться при изменении высоты объекта внутреннего слоя, особенно когда объект внутреннего слоя использует
поля или поля.
Пример:
<div id="box">
<p>Содержимое в объекте p</p>
</div>
CSS: #box {background-color:#eee; }
#box p {margin-top: 20px;margin - дно: 20px; text-align:center; }
Решение: добавьте 2 пустых объекта div над и под объектом P CSS-код: .1{height:0px;overflow:hidden;} или добавьте атрибут border в DIV.
Следующий метод представляет собой метод анализа с другой стороны:
Методы обработки ошибок браузера, скомпилированные (частично) для друзей, которым нравится веб-дизайн, которыми можно поделиться:
1. Звездочка*
IE может распознавать *, но стандартные браузеры, такие как FF, не могут распознавать *.
Пример: p { цвет:желтый; *цвет:красный;}
Подобные есть
+ знак плюс
Только IE объясняет
р {цвет: красный; + цвет: синий}
IE отображает синий цвет, а FF — красный.
2.!важно
IE6 и более ранние версии игнорируют этот стиль, IE7 FF его поддерживает;
р {цвет: красный ! важный; цвет: желтый;}
IE7 FF будет показывать красный IE6 желтый
Обратите внимание, что метод !important игнорируется только в IE6 и ниже после соблюдения вышеуказанного формата. Другие методы увеличения веса стиля можно использовать универсально.
3. Подчеркните.
Версии IE6 и ниже будут использовать этот стиль, другие будут игнорироваться.
п {цвет: красный; _цвет: синий}
4. Примечания:
р {цвет: красный};
Этот стиль можно применять и отображать в IE6, но он не будет обрабатываться в версиях IE5 и ниже, поэтому его можно отличить для IE5/6.
5. @ИМПОРТ:
Используйте URL-адрес в @IMPORT для импорта стилей. Обычно значение URL-адреса помещается в кавычки, как показано ниже: @IMPORT URL("newstyle.css"); таким образом, такое использование может поддерживаться браузерами IE5 и выше, а также FF. достижение Стили IE4 обрабатываются отдельно.
Кроме того, есть еще один метод:
Экран @IMPORT URL("noie.css");
Экран — это опция, используемая для указания типа устройства, экран используется для отображения на экране, а печать — для отображения устройства печати. Однако IE не поддерживает этот метод, и все браузеры IE могут различать IE и FF.
6. Селектор атрибутов: используется для выбора объектов с определенными атрибутами.
диапазон [класс = левый] {цвет: синий}
диапазон [название] {цвет: красный;}
IE6 его не поддерживает, но в FF он работает нормально, поэтому IE и FF можно обрабатывать отдельно.
В реальной разработке IE и FF часто необходимо обрабатывать отдельно. Вы можете использовать следующий код:
#содержание{
цвет:красный;
}
[xmlnx] #content{
цвет:синий
}
Я думаю, что этот метод очень практичен и часто используется. Рекомендую его друзьям. Если вам нужно более подробное объяснение, я могу опубликовать его еще раз.
7. Селектор подобъектов:
диапазон>p{цвет:красный}
IE6 также не поддерживается, и его также можно использовать для различения IE и FF.
8. Метод Тантека
#содержание{
цвет:синий;
голосовое семейство:""}"";
голосовое семейство: наследовать;
цвет:красный;
}
После использования voice-family в приведенном выше коде следующий цвет:красный не будет анализироваться браузерами IE5.5 и ниже. Поэтому цвет текста будет красным в IE6/7/FF, а также в IE5.5 и ниже. в браузере будет отображаться синим цветом;
Кроме того, есть еще один способ справиться с голосовым семейством:
#содержание{
цвет:красный;
голосовое семейство:"}"
голосовое семейство: наследовать;
цвет:синий;
}
Используя этот метод, текст в браузерах IE6 и ниже и браузере FF будет отображаться красным, а текст в браузерах IE5 и ниже будет синим!
9. Экранирующие атрибуты
p{width:200px;}
IE5.5 и ниже будут игнорироваться. Примечание. Символ обратной косой черты не может появляться раньше 0–9 или буквы af.
10. Условные комментарии в IE 1. Знакомство с условными комментариями
Условные комментарии в IE обладают превосходной способностью отличать версии IE от IE и не-IE и обычно используются в веб-дизайне.
метод взлома.
Условные комментарии можно использовать только в IE5 и выше.
Если у вас установлено несколько IE, условные комментарии будут основаны на самой последней версии IE.
Базовая структура условных комментариев такая же, как и у комментариев HTML (<!– –>). Поэтому браузеры, отличные от IE, будут рассматривать их как обычные комментарии и полностью игнорировать их.
IE будет использовать условие if, чтобы определить, следует ли анализировать содержимое условного комментария так же, как обычное содержимое страницы.
2. Атрибуты условных аннотаций
gt: больше, выберите условную версию или выше, исключая условную версию
lt: меньше, выберите версию ниже условной версии, исключая условную версию
gte: больше или равно, выберите условную версию или выше, включая условную версию
lte: меньше или равно, выберите версию ниже условной версии, включая условную версию
! : выберите все версии, кроме условной, независимо от того, высокая или низкая, как использовать условные комментарии.
Обратите внимание на замену <> в коде соответствующим знаком «больше» или «меньше» на английском языке.
<!--[если IE 5]>Видимо только в IE5.5<![endif]-->
<!--[if gt IE 5.5]>Видимо только в IE 5.5 и выше<![endif]-->
<!--[если это IE 5.5]>Видимо только в IE 5.5<![endif]-->
<!--[if gte IE 5.5]>Видимо для IE 5.5 и выше<![endif]-->
<!--[if ite IE 5.5]>Видимо для IE 5.5 и более ранних версий<![endif]--><!--[if !IE 5.5]>Видимо для IE 5.5, отличного от IE<![endif]
-->
Следующий код представляет собой условный комментарий, который работает в браузерах, отличных от IE.
<!--[if !IE]><!-->Вы не используете Internet Explorer<!--<![endif]-->
<!--[если IE 6]><!-->Вы используете Internet Explorer версии 6 или браузер, отличный от IE<!--<![endif]-Ниже
приведены три комплексных решения:
Первый тип:
.div {
фоновый диапазон;
*фон:зеленый !важно;
*фон:синий
}
Второй тип:
.div {
поле: 10 пикселей;
*поле: 15 пикселей;
_маржа: 15 пикселей;
}
Третий тип:
#div { color: #333 };
* html #div {цвет: #666};
*+html #div { цвет: #999 }