Недавно я создавал для себя новый веб-сайт и придумал некоторые эффекты, но во время реализации столкнулся с некоторыми незначительными проблемами, такими как этот встроенный блок. К счастью, большая часть проблем решена, поэтому я написал, чтобы поделиться.
Когда мы создаем веб-страницы, нам иногда нужно, чтобы элемент мог определять ширину и высоту, как блок, а также мог работать непрерывно, как обычный встроенный элемент. Например, место, отмеченное красной линией на картинке ниже:
Обычно для достижения такого эффекта мы используем такой код:
Пример исходного кода
[www.downcodes.com] Хотя это и позволяет достичь цели, код все еще недостаточно усовершенствован и достаточно гибок. В идеале мы можем добиться этого с помощью следующего кода:
Пример исходного кода
[www.downcodes.com] В этом случае нам нужно указать ширину, высоту и фоновое изображение для тега. Однако атрибут отображения тега a по умолчанию является встроенным, а ширина и высота недопустимы. А если для display:block установлено значение a, хотя проблему ширины и высоты можно решить, элемент будет автоматически разрывать строки и не сможет добиться нужного нам эффекта. Есть ли способ добиться того же, что и тег img, который может устанавливать высоту и ширину без автоматического разрыва строки?
Ответ: да. Opera и Webkit поддерживают отображение свойства CSS2: inline-block. Используя этот атрибут, мы можем полностью добиться нужного нам эффекта в Opera, но в других браузерах он не будет работать.
Атрибут display также имеет менее часто используемое значение display: inline-table. Используя это значение, также можно полностью добиться нужного нам эффекта. Это свойство корректно поддерживается всеми браузерами, кроме IE, но… ну, опять IE. Хотя все веб-разработчики будут ненавидеть CSS, отказ от IE эквивалентен отказу от 70% пользователей, поэтому нам все равно придется искать другие решения.
У меня не было другого выбора, кроме как поискать в Google, и я действительно нашел это. Как указано в этой статье, если вы сначала активируете hasLayout IE, а затем установите его display: inline, этот элемент станет встроенным блоком. Таким образом, мы можем воспользоваться этой необоснованной особенностью IE и объединить ее с некоторым CSS! Хаки, обеспечивающие совместимость CSS-кодов с различными браузерами:
Пример исходного кода
[www.downcodes.com] .element-класс {
display: -moz-inline-stack; // код только для Firefox;
display: inline-block; //некоторые стандартные браузеры
масштаб: 1 //только для IE;
*display: inline; //Этот код известен только IE (CSS Hack)
}
С помощью этого кода вы можете создать встроенный блок, который будет вести себя одинаково в различных браузерах. Однако у этого метода есть небольшой недостаток: он не может пройти проверку W3C CSS. Конечно, пройти проверку тоже очень просто. Вы можете выдать таблицу стилей с атрибутом inline-table для браузеров, отличных от IE, и выдать отдельный IE Only CSS для IE.
