CSS3 Свойство box-shadow

При недавнем небольшом редизайне проекта решил отказаться от поддержки IE. Верстка по-прежнему осталась кроссбраузерной, как и работа скриптов, но некоторые декоративные эффекты теперь доступны только для нормальных браузеров. В данном случае я веду речь о поддержке CSS3, который постепенно ввожу в употребление. И действительно, почему когда большинство нормальных браузеров уже поддерживают третью спецификацию каскадных стилей, мы должны использовать технологии «каменного века», перегружая страницу и заставляя пользователя тянуть лишние килобайты кода для «фиксов» хромого на обе ноги браузера?

Далее поведу речь о создании тени вокруг изображений (и других элементов) с использованием свойства CSS3 box-shadow.

В общем случае синтаксис box-shadow выглядит так:

box-shadow: inset || [ <length> <length> <length>? <length>? || <color> ]

• Первое length задает смещение тени по оси X (горизонтали). Может задаваться в любых допустимых единицах измерения CSS Положительное значение задает смещение вправо, отрицательное – смещение влево;
• Второе length задает смещение по оси Y (вертикали). Положительное значение соответствует смещению вниз, отрицательное – вверх;
• Значение третьего length определяет радиус размытия. Отрицательные значения недопустимы;
• Четвертое length-значение – радиус растяжения тени. Положительные значения растягивают тень во всех направлениях, отрицательные сужают;
• color – базовый цвет тени;
• Если указано ключевое слово inset, тень будет направлена внутрь элемента.

И небольшая демонстрация свойства box-shadow. Работает в браузерах Firefox, Safari и Chrome.

А для «прихильників» браузера Internet Explorer даю картинку :)

Стили CSS3:

#example-box-shadow img {
  margin-left:0.7em;
  padding:3px;
  border: 1px solid #1A3457;
  box-shadow: 0 0 5px #1A3457;/* Каноническое задание */
  -webkit-box-shadow: 0 0 5px #1A3457; /* Safari, Chrome */
  -moz-box-shadow: 0 0 5px #1A3457; /* Firefox */
}
/* Тень смещена вправо-вниз */
#example-box-shadow img.sh-rb {
  box-shadow: 5px 5px 5px #1A3457;
  -webkit-box-shadow: 5px 5px 5px #1A3457; /* Safari, Chrome */
  -moz-box-shadow: 5px 5px 5px #1A3457; /* Firefox */
}
/* Тень смещена влево-вверх */
#example-box-shadow img.sh-lt {
  box-shadow: -5px -5px 5px #1A3457;
  -webkit-box-shadow: -5px -5px 5px #1A3457; /* Safari, Chrome */
  -moz-box-shadow: -5px -5px 5px #1A3457; /* Firefox */
}

Код HTML:

<img class="sh-lt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />
<img class="sh-rb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />

И в качестве бонуса CSS3 код для расширения тени при наведении указателя мыши:

#example-box-shadow img:hover {
  box-shadow: 0 0 7px 1px #1A3457;
  -webkit-box-shadow: 0 0 7px 1px #1A3457;
  -moz-box-shadow: 0 0 7px 1px #1A3457;
}

Приверженцы Internet Explorer этого не увидят.

UPD: Еще по теме CSS3: Свойство border-radius.

UPD: Ну и дабы развеяться: Топ 10 «креативных» дизайнов обложек «Преступление и наказание»

© 2009 dotrb.blogspot.com

Читать дальше »

IE8 узнайте факты!

У Microsoft есть страничка для Internet Explorer 8 «Узнайте факты».

Как видно из таблицы сравнения браузеров, IE 8 безопасен, конфиденциален, прост в использовании, а Firefox и Chrome – нет :). Лично я все еще сомневаюсь, что Microsoft наконец-то (в очередной раз) сделал нормальный браузер. Но старая добрая пропаганда рулит!

Хохму узнал отсюда: Microsoft’s Browser Comparison Chart

Читать дальше »

Определить IE6 с помощью JavaScript 2

Фактически это не второй скрипт, а фикс предыдущего.

Напоминаю задачу: определить, что браузер посетителя IE6 или более древний.

В Internet Explorer в navigator.appVersion первой идет версия движка, а потом уж все остальное. Примерно так:

4.0 (compatible; MSIE 6.0; Windows NT 5.2; Win64; x64; SV1; .NET CLR 2.0.50727)

Исправленная функция:

function detectIE6(){
  var browser = navigator.appName;
  if (browser == "Microsoft Internet Explorer"){
    var b_version = navigator.appVersion;
    var re = /\MSIE\s+(\d\.\d\b)/;
    var res = b_version.match(re);
    if (res[1] <= 6){
      return true;
    }
  }
  return false;
}

Для выборки части строки использовались регулярные выражения.

Читать дальше »

Определить IE6 с помощью JavaScript

Не так давно мне понадобилась функция для определения браузера и его версии. А точнее, что браузер пользователя – именно Internet Explorer 6-й или более древний.

А вот и сама функция javascript:

function detectIE6(){
  var browser = navigator.appName;
  var b_version = navigator.appVersion;
  var version = parseFloat(b_version);
  if ((browser == "Microsoft Internet Explorer") && (version <= 6)){
    return true;
  }else{
    return false;
  }
}

И пример использования:

if ( detectIE6() ){
  // Выполняем действия только для IE6 или более ранней версии
}

UPD: Исправленная версия скрипта для определения ИЕ6.
Читать дальше »

IE и параметр white-space:pre

Internet Explorer не перестает удивлять собственными «фичами» (смело читай: «багами»). Даже если в документации написано, что он понимает параметр white-space, не факт, что так оно и есть.

Firefox отобразит следующий блок как блок предварительно форматированного текста.

<style type="text/css">
#text_pre {
  white-space: pre;
}
</style>
<span id="text_pre">
- Сынок, вставай!
- Зачем, мам, у нас же сегодня выходной!
- Какой к черту выходной?! Мы же негры!
</span>

IE6, в свою очередь, отобразит данный блок только в «строгом» режиме. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Тематическая картинка про IE и негров.

Читать дальше »

Интернет вас забанил

Для смеха. Прочитал сегодня на Хабрахабре: Я безумный / Интернет вас забанил

Сели мы тут с другом по разные стороны монитора и собрали вот штуковину

Работает для самых популярных браузеров. Для остальных принимаются предложения и всякая помощь

Зачем? Ну придумайте сами, можно просто как домашнюю страницу поставить девочке какой, пусть пугается

Под катом скриншоты страницы в популярных браузерах. Хотя лучше сначала сходите по ссылке :).

Mozilla Firefox - Видимо произошла какая-то ошибка

Internet Explorer - Неизвестная ошибка

Safari - Safari заблудился

Opera - Интернет вас забанил

Google Chrome - Интернет вас забанил

Читать дальше »

CSS стили для «хитрых» тегов

В предыдущем посте я давал обзор редко используемых тегов HTML. К сожалению, не все браузеры отображают тот или иной тег так, как нам хотелось бы. Поэтому будем их тюнинговать с помощью CSS.

Теги abbr и acronym

Сразу замечу, что браузер Internet Explorer вплоть до восьмой своей инкарнации не понимает тег <abbr>. Однако, тем не менее рекомендую задать правило CSS для обоих этих тегов. Добавьте в ваш список стилей следующее правило:

acronym, abbr {
  cursor: help;
  border-bottom: 1px dotted #000;
}

Теперь текст, заключенный в контейнерах <abbr> и <acronym> будет подчеркиваться пунктирной линией. А при наведении мыши будет отображаться курсор «вопрос».

Тег q – цитата

Замечание: IE не расставляет кавычки вокруг цитаты <q> и не понимает свойство quotes. Но тем не менее мы создадим нижеследующее правило для всех нормальных браузеров.

По умолчанию, браузер Mozilla Firefox отображает текст цитаты <q> в английских «лапках». Что неприемлемо, если мы цитируем текст на родном языке.

Создадим правило CSS для цитаты:

q {
  font-style: italic; /* курсивное начертание */
  quotes: "\00ab" "\00bb"; /* открывающие и закрывающие кавычки в формате Юникод */
}

Теперь цитата отображается в таких близких нашему сердцу русских «ёлочках»

За сим данный мини-обзор считаю завершенным. Успехов на тропах интернета!

Читать дальше »

Заставить IE создать элемент style

Сегодня с помощью JavaScript динамически создавал HTML элемент <style> внутри <iframe>. Да, мы, бля, не ищем легких путей ;). В Firefox срабатывает на «отлично», но как всегда не обошлось без сюрпризов от IE. И никакие «умные» (даже затрудняюсь в выборе кавычек) способы не помогали.

Зато вот какой шикарный трюк нагуглил:

var CSS = 'body { margin: 0px; }';
var htmDiv = document.createElement('div');
htmDiv.innerHTML = '<p>x</p><style>'+CSS+'</style>';
document.body.appendChild(htmDiv.childNodes[1]);

Работает в IE6 and IE7 и в нормальных браузерах.

• Thanks to Clint Priest!

Читать дальше »

ColorPicker - инструмент для выбора цвета

Этот JavaScript-компонент предоставляет простой и удобный инструмент для выбора HSV цвета.

Как добавить ColorPicker

1. включите файлы javascript в секции HEAD
2. добавьте ссылку на файл стилей colorpicker.css в секции HEAD
3. добавьте поле input для хранения/отправки 16-ричного значения цвета (без ведущего #)
4. инициализируйте ColorPicker

<script type="text/javascript">
  new Control.ColorPicker("colorFieldName");
</script>

Внимание: Не вызывайте "new Control.ColorPicker()" пока не закроете все окружающие форму (form) блочные элементы (напр. div). В противном случае это вызовет ошибку IE Operation Aborted в IE 6/7. Вместо этого используйте:

Event.observe(window, "load", function() { 
  new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" })
});

Этот способ в «чистом» виде непригоден для AJAX-методов, поэтому рекомендую вынести его в отдельную функцию, которую вызывать каждый раз, когда аяксовый метод отработал.

яваскрипт (javascript)

<script type="text/javascript">
//<![CDATA[
function activateColorPicker(){
  cp_Label = new Control.ColorPicker("label_color", { "swatch" : "inside_color1" });
}
// first time Run (for IE)
Event.observe(window, "load", function() { 
  activateColorPicker();
});
//]]>
</script>

ajax_delete_label.rjs : Пример вызова функции для Ruby on Rails.

page.replace_html 'labels_container', :partial => 'custom_labels'
page.call 'activateColorPicker'

Скачать ColorPicker можно с его страницы в Google Code: colorpickerjs.
Читать дальше »

CSS оформление внешних ссылок

Как с помощью CSS выделить внешние ссылки, чтобы они отличались от внутренних.

Иногда в тексте страницы требуется выделить внешние ссылки другим стилем, чтобы они отличались от внутренних ссылок сайта. Для чего этим ссылкам может понадобиться дополнительное оформление? Потому, что пользователь должен знать, что пройдя по этой ссылке, он перейдёт на другой сайт. А вдруг страницы, на которую ведёт ваша внешняя ссылка, уже не существует? Или сервер недоступен? Или там, прости господи, такая непотребщина выложена, что просто «ужоснах»?! ..и пользователю придётся срочно в панике закрывать окно браузера, потому что он в данный момент в офисе, сзади приближается шеф, а тут в мониторе ТАКОЕ!..

Таким образом, подобное выделение делает интерфейс сайта более предсказуемым. А это, ИМХО, для юзабилити только плюс.

Для начала определимся, какие ссылки будем считать внутренними. В моём случае они могут быть такие: "http://dotrb.blogspot.com/", "http://www.dotrb.blogspot.com/" и "/". Крайнее обозначение -- это ссылка в «корень» сайта.

Для этого применим регулярные выражения и селекторы атрибутов CSS:

a[href^="http:"] {...}

Этот код означает, что все ссылки с атрибутом href начинающимся с http: будут иметь стили присвоенные в данном правиле.

Чтобы отличить внешние ссылки от внутренних, пропишем правило, включающее домен:

a[href^="http://dotrb.blogspot.com/"], a[href^="http://www.dotrb.blogspot.com/"], a[href^="/"] {
  color:#C61A1A;
}

Беда в том, что IE 6 не понимает таких селекторов. Поэтому специально для «эксплорера» будем использовать expression.

Примерно так будет выглядеть правило, работающее для всех нормальных браузеров и Internet Explorer:

/* Цвет ссылки "по-умолчанию" -- для внешних ссылок */
a {color:#3256B6;}

/* Цвет внутренних ссылок */
a[href^="http://dotrb.blogspot.com/"], a[href^="http://www.dotrb.blogspot.com/"], a[href^="/"] {
  color:#C61A1A;
}
/* Цвет внутренних ссылок для IE */
a, a:link{
  color:expression(
    (this.getAttribute("href") && 
      ( (this.getAttribute("href").lastIndexOf("http://dotrb.blogspot.com/")==0)||
        (this.getAttribute("href").lastIndexOf("http://www.dotrb.blogspot.com/")==0)||
        (this.getAttribute("href").lastIndexOf("/")==0)
      )
    ) ? "#C61A1A" : "#3256B6"
  );
}

Теперь внутренние ссылки у меня будут под цвет дизайна (#C61A1A), а внешние -- более приближенными к «стандартному» синему (#3256B6).
Читать дальше »

Решение проблемы PNG в IE на чистом CSS

Суть проблемы в том, что IE по крайней мере до версии 6 не понимает полупрозрачность изображений формата PNG. Вобщем, кто сталкивался, тот знает.

Вот мой фикс для проблемы PNG в Internet Explorer на чистом CSS

CSS:

/* -- PNG Fix for IE 6 -- */
#rssfeed {
cursor: pointer;
background: none;
/* фильтр применим к IE5+/Win */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='fixed', src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiel0SeNsSu52YwmiAJR-AEnJqpqUDxW-lDI_85mtdf-Cll5zo9pyO32TbT5cC5LYi3eaDiQZ183gVw-5kpDyNlmj3m_3HzQbpr05Wshe1vPSovqYY1Ocwipw6jQiZxJrXUkBgin-3zN6yz/');
}
#rssfeed[id] {
/* [id] применим для нормальных браузеров (не IE) */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiel0SeNsSu52YwmiAJR-AEnJqpqUDxW-lDI_85mtdf-Cll5zo9pyO32TbT5cC5LYi3eaDiQZ183gVw-5kpDyNlmj3m_3HzQbpr05Wshe1vPSovqYY1Ocwipw6jQiZxJrXUkBgin-3zN6yz/) no-repeat;
}
* html #rssfeed a {
/* сделать ссылки интерактивными в IE */
position: relative;
z-index: 999;
}

HTML:

<div id="rssfeed"></div>

Этот прием у меня сработал.

Почему-то многие рекомендуют способ от Komodomedia - CSS PNG Image Fix for IE. Наверное потому, что никто не применял :). У меня их способ не сработал.
Ну и вот еще ссылка на подборочку фиксов для PNG в IE: CSS Hackz Series: PNG Fix for Internet Explorer.
Читать дальше »

Ошибка Internet Explorer: Операция прервана

Время от времени, особенно когда web-разработка вам начинает казаться на редкость простым и приятным делом, вы натыкаетесь на это:

Ошибка Microsoft Internet Explorer: Не удалось открыть узел... Операция прервана.
Error: Internet Explorer cannot open the Internet site. Operation aborted

В интернете вы скорее всего найдёте только одну причину, вызывающую эту ошибку. Видимо мне исключительно "повезло" -- я знаю целых 3 (три!).

1. Первая -- самая известная. Вы без труда найдёте её описание и решение в любом поисковике (я даже ссылки дам). Это ошибка DOM и JavaScript.

Это вызовет ошибку в IE

<html>
<head>
  <script type="text/javascript">
    function appendElementToBody() {
      var span = document.createElement('span');
      document.body.appendChild(span);        
    }
  </script>
</head>
<body>
  <table>
  <tr>
    <td>
      <script type="text/javascript">
        appendElementToBody();
      </script>
    </td>
  </tr>
  </table>
</body>
</html>

a) Дело в том, что вы не можете добавлять в элемент BODY из скрипта (javascript), который не является прямым потомком BODY;
b)Более того: вы не можете изменять родительский элемент из скрипта, являющегося его потомком.

Решение проблемы (фрагмент):

<body>
  <table>
  <tr>
    <td>
      ...
    </td>
  </tr>
  </table>
  <script type="text/javascript">
    appendElementToBody();
  </script>
</body>

Это был первый случай. Два других не столь распространенныё, но описать их проще.
2. Wrong HTML code при использовании SSL
Причиной служит корявый HTML-код. Чаще всего наблюдается при защищенном соединении (по протоколу https://).
Решение: Перепроверьте, нет ли у вас «пересекающихся» элементов, все ли теги закрыты и т.п.

Третий случай совсем не тривиальный и довольно редкий
3. «Tabs in ERb views»
ХЗ, это уже просто «родной» глюк Ruby on Rails. Только вот один момент: иногда табы в видах .rhtml прокатывают. Их и не замечаешь пока не начнешь тестить страницу в IE. Опять-таки, чаще всего по https:. «Мистика», а бывает :).
Решение: не используйте символы табуляции в .rhtml

А вот и ссылки (только по первому случаю):
BUG: Error message when you visit a Web page or interact with a Web application in Internet Explorer: "Operation aborted"
Error: Internet Explorer cannot open the Internet site Operation aborted
Dealing with IE "Operation Aborted". Or, how to Crash IE

Еще по теме
Определить IE6 с помощью JavaScript 2
IE8 узнайте факты!
IE и параметр white-space:pre

Читать дальше »

CSS полупрозрачность изображения

Из недавнего опыта применения CSS. Полупрозрачность изображения при наведении указателя мыши. Может пригодиться, например, если нужно «дёшево и сердито» сделать подсветку графического меню или кнопки.

Код HTML:

<div class="hover_image">
  <a href="http://dotrb.blogspot.com">
    <img src="путь к изображению" style="width:88px; height:31px;" />
  </a>
</div>

В примере будем использовать псевдо класс hover.

Стили CSS:

.hover_image a:hover img {
  opacity:.75;
  filter: alpha(opacity=75); /* IE */
  -moz-opacity: 0.75; /* Firefox */
}

Читать дальше »

CSS-фикс для Internet Explorer

В одном из предыдущих постов, я приводил решение проблемы min-height для IE. Кстати, тот же самый прием прекрасно работает как для min-height, так и для max-height, min-width, max-width.

В том случае фикс был основан на использовании команды !important. Дело в том, что Internet Explorer до версии 6 включительно её не понимает.

CSS:

div.diff-width {
  width: 256px !important;
  width: 250px;
}

HTML:

<div class="diff-width">
  Internet Explorer отобразит это иначе ;).
</div>

Internet Explorer отобразит блок длиной 250 пикселей вместо положенных 256. Т.к. для браузеров, нормально поддерживающих спецификацию, инструкция с !important будет более важной, а для IE нет. Читать дальше »

CSS замена input[type="text"] в Internet Explorer

Internet Explorer 6 не понимает селектор input[type="text"]. Однако можно воспользоваться expression (существует еще со времён IE 5).

input[type="text"] {width: 120px;}
/* Правило для Internet Explorer */
input { width:expression(this.type=='text' ? '120px' : ''); }

Читать дальше »

Как скрыть правило CSS от IE

Часто возникает задача скрыть правило CSS от обработки браузером. В случае с Internet Explorer 6 и более ранними версиями прекрасно срабатывал трюк с дочерними селекторами.

Скрыть правило CSS от IE 6

html>body .foo {Скрытый CSS;}

Теперь Internet Explorer 7 понимает дочерние селекторы и поэтому CSS-трюк немного усложняется :)

Скрыть правило CSS от IE 7

html>/**/body .foo {Скрытый CSS;}

Читать дальше »

CSS: дочерние, соседские селекторы и псевдо классы в IE7

Эти команды CSS наконец-то понимает Internet Explorer 7

Потомки

Допустим, у нас есть следующий HTML:

<div><p><span>Текст сообщения</span></p></div>

В этом примере <p> является "сыном" (прямым потомком) <div>, а <span> -- "внуком" <div>. Мы можем сделать текст элемента <span> красным, используя следующее правило CSS:

div span {color: red;}

Это означает, что содержимое любого элемента <span>, расположенного внутри элемента <div> будет красным. Этот <span> может быть прямым потомком ("сыном"), или непрямым потомком ("внуком", "правнуком" и т.д.) элемента <div>.

Если мы используем следующее правило CSS:

div>span {color: red;}

Текст внутри <span> не будет красным. Так как это правило озачает: <span>, являющийся прямым потомком <div>. А в нашем примере <span> является "внуком" <div>.

Соседи

Теперь IE7 понимает еще и "соседские" селекторы.

blockquote+p {margin-top: 0;}

Это CSS правило означает, что параграф, следующий сразу за цитатой, не имеет верхнего отступа.

Еще один хороший пример использования соседского селектора можно применить к горизонтальным спискам.

li+li {border-left: 1px solid black;}

Это правило означает, что каждый <li>(элемент списка), следующий за другим <li> (т.е. все, кроме первого) будет иметь левый бордюр.

Псевдо-класс First-child

Если вам нужно выделить первый элемент (первого потомка) родительского элемента, используйте псевдокласс first-child. Например, чтобы первый параграф внутри некой области с id="content" имел нулевой верхний отступ, используйте правило CSS:

#content p:first-child {margin-top: 0;}

Источник: New CSS commands for Internet Explorer 7 Читать дальше »

Скриншот веб-страницы полностью - 2: Firefox addon

В догонку к ранее упомянутому еще одно расширение Firefox для снимков полных веб-страниц. Лично мне понравилось тем, что снимки можно «автоматом» отправлять на удаленный сервер (регистрация не требуется). В web-разработке весьма полезно.

FireShot - это дополнение к обозревателю Mozilla Firefox, которое позволяет создавать скриншоты открываемых вами страниц.
В отличие от других средств подобного рода, это дополнение предоставляет в распоряжение пользователя целый ряд инструментов для редактирования скриншота и добавления графических и текстовых аннотаций. Подобная функциональность будет полезна для веб-разработчиков, тестеров и редакторов.
Скриншоты могут быть загружены на сервер изображений, сохранены на диске (в форматах PNG, GIF, JPEG, BMP), распечатаны, скопированы в буфер обмена, отправлены по электронной почте или экспортированы во внешний редактор для последующей обработки.


Качать отсюда: FireShot

P.S. Есть это дополнение и для Internet Explorer (качать с сайта разработчика)
Читать дальше »

min-height для Internet Explorer

Нашел прекрасное решение проблемы неработающего min-height в Internet Explorer. По утверждению автора работает в IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2.

CSS: min-height с инструкцией !important

.minheight100{
  border:1px solid #C61A1A;
  min-height:100px;
  height:auto !important;
  height:100px;
}

<div class="minheight100">
<em>Хуже водки -- лучше нет</em><br />
//В. Черномырдин
</div>

Пример:

Хуже водки -- лучше нет
//В. Черномырдин

Другие решения проблемы min-height в Internet Explorer (IE) смотрите в рубрике «Прочитать полностью» :)

IE-хак с underscore

 min-height: 200px;
_height: 200px; /* хак для IE */

comment-hack для IE

/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em; 
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

Решение с помощью выражений

min-width
#block {
min-width:100px;
width:expression(this.width < 100? ‘100px’: this.width);
}
min-height
#block {
min-height:100px;
width:expression(this.height < 100? ‘100px’: this.height);
}

Читать дальше »