Выпекаем сайты, находим покупателей

Резиновая вёрстка сайта для IE

Многие делают резиновую вёрстку на сайте, таким образом можно сделать хорошее и удобное отображение сайта для разных мониторов (сайт не вылезет за маленькие экраны и не будет маленьким на большим). Обычно я использую минимальную ширину в 980px и максимальную в 1200/1500px. Итак, как задать минимальное и максимальное значение ширины для резиновой вёрстки сайта, учитывая кроссбраузерность для IE (Internet Explorer)?

резиновая вёрстка

Конечно, существуют замечательные css-свойства max-width и min-width (а также min-height и max-height). Но, практика резиновой вёрски сайта показывает, что IE как всегда нечего хорошего не знает. Особенно тот, что старичёк - ei5, ei6...

Как сделать, чтобы было хорошо?

Существуют различные способы решения и разные вариации решений. Наиболее частый и правильный способ сделать резиновую вёрстку сайта - это использование expression. Expression - это метод, созданный для выражения записей JavaScript в CSS свойствах. Expression игнорируется всеми браузерами, кроме IE. В примерах я задам минимальную высоту в 980px и максимальную в 1200px.

Вариант 1
.wrapper {
	/* для современных браузеров, которые понимают min/max-width */
     min-width: 980px;
     max-width: 1200px;
    /* для гвоздя программы - IE */
     width:expression(document.body.clientWidth < 980? "980px" : document.body.clientWidth > 1200? "1200px" : "auto");
}


Вариант 2
.wrapper {
	/* для современных браузеров, которые понимают min/max-width */
     min-width: 980px;
     max-width: 1200px;
    /* для гвоздя программы - IE */
    width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 980 ? '980px' : 'auto' && (documentElement.offsetWidth || document.body.offsetWidth) > 1200 ? '1200px' : 'auto');
}


Вариант 3
Альтернативный способ с помещением кода в отдельный javascript файл. Содержание width-ei.js:
window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);
var minwidth = document.getElementById("wrapper").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("wrapper").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("wrapper").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

Таким образом значения для класса wrapper будут браться из нормальных min-width, max-width класса wrapper. Спасибо хабру :)

Вам осталось выбрать наиболее удобный для вас способ!

Комментарии и отзывы к материалу

Открыта вакансия на первого комментатора!

Отправить комментарий

Как зовут?

Сообщение