1. Схема
При отладке проблем CSS я часто добавляю рамку к определенному элементу, чтобы точно увидеть, что происходит с этим элементом, и помочь определить источник проблемы. Это часто срабатывает, потому что дает мне более четкое представление о макете. Но если это элемент уровня блока, что-то может пойти не так — добавление границы в 1 пиксель к любому элементу уровня блока, скорее всего, повлияет на макет, сделав элемент на 2 пикселя шире.
Свойство Outline является идеальной заменой, поскольку оно визуализирует объект, не влияя на поток документа. Однако IE6 и IE7 не поддерживают атрибут Outline, поэтому его нельзя использовать для отладки в этих двух браузерах.
2. Наследовать (значение)
Существует множество примеров этого в разработке CSS: установив определенные стили для определенного элемента, чтобы указать этому элементу «наследовать» все добавленные свойства его родительского элемента, вы можете избежать значительного объема ввода с клавиатуры.
Этого можно легко добиться, установив inherit. Это может быть полезно. Например, при переопределении атрибута фона в атрибуте часто содержится много текста (цвет, URL-адрес изображения, местоположение и т. д.). Таким образом, вместо того, чтобы переписывать эти значения, вы можете просто захотеть, чтобы рассматриваемый элемент имел то же свойство фона, что и его родительский элемент, и значение наследования сделает свое дело - очевидно, сэкономив много ввода с клавиатуры.
К сожалению, значения наследования не поддерживаются в IE6 и IE7 (за исключением направления (направления текста) и свойств видимости).
3. Пустые ячейки
Этот атрибут используется только для таблиц или элементов, у которых для атрибута display установлено значение table-cell. Если вы динамически добавляете содержимое в таблицу, вы можете столкнуться с ситуацией, когда содержимое определенной ячейки пусто, и вы не хотите, чтобы граница, цвет фона, фоновое изображение и т. д. этой пустой ячейки были скрыты.
Использование «пустых ячеек: скрыть» может решить эту проблему, полностью скрывая ячейки, в которых может возникнуть такая ситуация.
Internet Explorer не поддерживает атрибут пустых ячеек.
4. Сторона подписи
Говоря об атрибуте таблицы, этот атрибут используется для объявления заголовка таблицы, который отображается в боковом столбце таблицы. Он принимает четыре значения: верхнее, нижнее, левое и правое. Internet Exporer не поддерживает этот атрибут, заголовок таблицы всегда будет отображаться вверху таблицы в IE6 и IE7.
5. Счетчик-инкремент/Счетчик-сброс
Упорядоченный список (
) очень удобен, поскольку избавляет вас от необходимости вручную добавлять возрастающие числа и позволяет изменять последовательность списка без изменения чисел.
CSS имеет свойства counter-increment и counter-reset, которые позволяют автоматически генерировать увеличивающиеся числа практически для любого элемента HTML, аналогично упорядоченному списку.
Но IE6, IE7 и даже Safari (до версии 3.x) не поддерживают эти свойства. Конечно, IE6 также не поддерживает псевдоэлемент :before.
6.Мин-высота
Иногда структура дизайна или макета веб-сайта требует области контента фиксированной высоты, в противном случае определенный визуальный эффект теряется. Это может быть из-за градиентного фона, уникального раскрывающегося списка или, может быть, из-за крутого эффекта свечения, который появляется в Photoshop. Но иногда на странице много контента, но страницу невозможно расширить должным образом.
На данный момент вам необходимо использовать атрибут min-height, поскольку он может указать браузеру отображать минимальную высоту для определенного элемента уровня блока, независимо от того, достигает ли фактическая высота содержимого этой минимальной высоты. Затем, если содержимое превышает минимальную высоту, элемент расширится соответствующим образом.
Единственное, что следует отметить при использовании min-height, это то, что он не поддерживается в IE6. Мы все знаем, что IE6 (медленно) вымирает, но некоторые клиенты все еще могут требовать, чтобы их сайты поддерживали этот проклятый браузер.
Хорошей новостью является то, что IE6 отображает значение высоты точно так же, как другие браузеры отображают «минимальную высоту», поэтому все, что вам нужно, это специальный хак для IE6 или отдельная таблица стилей для добавления определенной высоты, и проблема решена.
IE6 также игнорирует минимальную ширину, максимальную высоту и максимальную ширину, но описанный выше метод также возможен для этих свойств.
7. :наведите курсор
Технически :hover — это всего лишь псевдокласс, но он не поддерживается в IE6 (его поддерживают IE7 и IE8). Псевдокласс :hover позволяет добавить к элементу любой стиль наведения курсора мыши. Это очень полезно и позволяет избежать (по крайней мере, в некоторой степени) использования JavaScript.
Но если ваш веб-сайт должен полностью поддерживать IE6, особенно в Китае, где IE6 доминирует на небе, вам следует рассмотреть возможность отмены использования этого псевдокласса, если только соответствующий тег не имеет атрибута «href», например тега . . И если вы хотите добиться такого эффекта, возможно, вам придется прибегнуть к javascript и дополнительным стилям.
8.Дисплей
Для отображения обычно устанавливается одно из трех значений: блочный, встроенный и нет. «Благодаря» IE другие значения Display используются редко. К этим значениям относятся inline-block, table, inline-table и table-cell и т. д. Эти атрибуты очень полезны для решения некоторых особых задач компоновки.
Таким образом, хотя IE поддерживает эти три основных свойства дисплея, другие свойства он практически не поддерживает.
Фактически, поддержка атрибутов отображения в IE8 вполне полная. Однако для атрибута inline-block IE6/7 поддерживает только элементы, которые сами по себе являются встроенными.
Чтобы узнать больше о поддержке отображения в различных браузерах, посетите здесь — Примечание Shenfei
9. Клип
Это интересное свойство CSS, которое может пригодиться в особых ситуациях. Его можно комбинировать с непредсказуемым, динамически генерируемым контентом. Проще говоря, этот атрибут позволяет указать скрытую область на конкретном элементе — под ним также можно понимать, что в абсолютно позиционированном элементе область отображения элемента обрезается в соответствии с определенными настройками, а содержимое за пределами этой области будут скрыты.
Технически говоря, атрибут clip поддерживается IE, но поддерживает только синтаксис без запятых, например
div.cipped {
отступ: 20 пикселей;
ширина: 400 пикселей;
высота: 400 пикселей;
клип: прямоугольник (20 пикселей 300 пикселей 200 пикселей 100 пикселей);
позиция: абсолютная;
} Вышеупомянутый стиль (атрибуты в скобках после rect не разделены запятыми) может работать в большинстве браузеров, но может не пройти проверку CSS, поскольку операторы не разделены запятыми.
10. :фокус
Это еще один псевдокласс, о котором необходимо упомянуть здесь, поскольку все браузеры, отличные от IE, поддерживают этот атрибут. Псевдокласс :focus позволяет объявить специальный стиль, который динамически применяется к элементу страницы, когда он становится фокусом клавиатуры (мыши). Это полезно для элементов формы, поскольку вы можете добавить рамку к полю ввода, когда оно выбрано.
