www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > FAQ > Слои > Какая есть альтернатива стилевому свойству min-width в...

Справочник по CSS (ЦСС) и ШТМЛ

Какая есть альтернатива стилевому свойству min-width в браузере Internet Эксплорер 6, который не поддерживает min-width?

Параметр min-width активно применяется при верстке с помощью слоев, поскольку позволяет установить минимальную суммарную ширину всех колонок. Такое ограничение необходимо для того, чтобы браузеры не форматировали блоки при уменьшении размеров окна браузера. В противном случае слои начинают ?скакать? и стройная исходная модульная сетка страницы рушится.

Браузер Internet Эксплорер 6 (ИЕ6) в отличие от своих ?коллег по цеху? Опера и Файер фох не поддерживает стилевой атрибут min-width, поэтому приходится подыскивать другие средства для верстки в этом браузере. Заметим, что проблема характерна для версии 6 и ниже, Internet Эксплорер 7 в полной мере поддерживает свойства min-width.

Аналогом min-width в ИЕ6 какой-то мере выступают динамические выражения, встраиваемые в CSS (ЦСС). Эти выражения позволяют с помощью скриптов, написанных на языке JavaScript, менять значения стилевых параметров ?на лету?. Так, дастаткова определить ширину окна браузера и если она меньше определенной величины, подставить новое значение ширины контейнера. Для этого следует написать следующую конструкцию.

width: expression(document.body.clientWidth > 420 ? "100%" : "420px")

Вначале пишем стилевой параметр width, а после двоеточия задаем ключевое слово expression. В скобках указан так называемый тернарный оператор, он трактуется следующим образом. Если ширина окна браузера (document.body.clientWidth) больше, чем 420 пикселов, то в качестве значения width используется 100%, иначе width присваивается значение 420px.

В примере 1 приведен код, работающий во всех браузерах.

Пример 1. Использование expression

Валидный HTML
Невалидный CSS

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Колонки без переносов</title>
<style type="text/CSS (ЦСС)">
#container {
 min-width: 420px; /* Минимальная ширина контейнера */
 width: expression(document.body.clientWidth > 420 ? "100%" : "420px") /* Ширина для ИЕ6 */
}
#col1 {
 background-color: #fc0; /* Цвет фона колонки */
 padding: 5px; /* Поля вокруг контента */
 float: left; /* Обтекание по правой стороне */
 width: 150px; /* Ширина левой колонки */
}
#col2 {
 background-color: #c0c0c0; /* Цвет фона колонки */
 padding: 5px; /* Поля вокруг контента */
 width: 250px; /* Ширина правой колонки */
 float: left; /* Обтекание по правой стороне */
}
</style>
</head>
<body>
<div id="container">
 <div id="col1">Колонка 1</div>
 <div id="col2">Колонка 2</div>
</div>
</body>
</html>

Поскольку в данном примере используется синтаксис JavaScript, то валидатор обнаружит ошибки в строке с expression. Динамические выражения не входят в спецификацию CSS (ЦСС) и присущи только браузеру Internet Эксплорер. К тому же обязательно должна быть включена поддержка JavaScript в браузере, иначе пример не будет работать должным образом.

В некоторых случаях Internet Эксплорер выводит предупреждение системы безопасности. Скрипты при этом не выполняются до тех пор, пока заблокированное содержимое не будет разрешено (рис. 1).

Рис. 1

Рис. 1. Блокировка скриптов в браузере Internet Эксплорер

Поиск по сайту



FAQ

Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект