background-size:100% и Интернет Эксплорер - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - background-size:100% и Интернет Эксплорер (http://forum.oszone.net/showthread.php?t=315195)

background-size:100% и Интернет Эксплорер

Здравствуйте,
Причина: Делаю простенький сайт-визитку, захотелось сделать фон фотографией, размером чуть меньше, чем монитор 22', пытаюсь растянуть на body, во всех браузерах растягивает и только любимый Интернет Эксплорер ставит её обычный размер (белая полоса вокруг в зависимости от прижимания)... Перепробовал множество найденных решений, ничего не помогло... (При этом, по F12, в стилях, ИЭ подчёркивает background-size:100% красной волнистой линией)... (При проверке CSS программой CodeLobster ошибок нет, но отображение такое же, как и в ИЭ)...

Вопрос: Есть какие-нибудь советы на эту тему?..

Вопрос2: В дополнение, на сайте есть меню на CSS, во всех браузерах отображается красиво, и лишь ИЭ не хочет распознавать горизонтальный список ul, что ему не нравится, может очерёдность какая-то?..

Код:

* {

        margin: 0;

        padding: 0;

}

html,

body{

        height: 100%;

        background: url('../images/fon11.jpg') top left  fixed no-repeat;

        -o-background-size: 100%;

        -webkit-background-size:100%;

        -moz-background-size:100%;

        -khtml-background-size:100%;

        background-size: 100%;

}

.wrapper {

        position: relative;

        min-height: 100%;

}



h1 {font-family:Georgia; font-style:italic; color: #176d6d; margin:1em 0 1em;}

h2 {color: #d1633c;}

h3 {color:#176d6d; text-align: center;}

h4 {color:#176d6d; text-align: center;}

p{color:#000; font-size: 0.9em;}



.column_left{

        width: 20%;

}

.column_right{

        width: 20%;

}



.banner {font-family:Georgia; font-size:1.4em; font-style:italic; color:#176d6d; text-align: left; margin-left: 15%; margin-top:-10px;}



.shapka{

        text-align: center;

}



.nssylka{

        float:right;        

}



/*--ID вывода даты-----*/

/*#date{/*color: #42595F;*/ /*text-align: right; font-size: 1.2em; padding:5px 20px 0 0;}*/

/*--Класс вывода даты-----*/

#date{font-family: Arial, Helvetica, sans-serif; color: #999966;/*color: #42595F;*/ text-align: right; font-size: 1.2em; padding:5px 20px 0 0; vertical-align:midl}



/*--Верхняя строка меню------*/

.menu a {color:#FFF; margin-left:20px; margin-right:20px;}

a:active {

    color: #ffff00; /* Цвет активных ссылок */

   }

   

/*--Ссылка на главную-----*/

.nav{

        font-style:italic;

        text-align: left;

        padding-left: 20px;

}



#glavnaya{

        font-family: Arial, Helvetica, sans-serif; 

        color: #eee;/*color: #42595F;*/ 

        font-size: 0.9em; 

        padding:5px 20px 0 0; 

        vertical-align:midlle;

        width: 80%;

}



#uslugi{

width: 80%;

}



#otkl_li{

        list-style-type: none; /* Убираем маркеры */

}

#glavnaya1{

        background:#5a7edc;

        height:120px;

        padding:15px;

}

#glavnaya2{

        background:#64aa0c;

        padding:15px;

}

#glavnaya3{

        background:#863254;

        padding:15px;

}

#glavnaya4{

        background:#ff3200;

        height: 120px;

        padding:15px;

}

#glavnaya5{

        background:#dea716;

        padding:15px;

}

#glavnaya6{

        background:#8730f8;

        padding:15px;

}



/*--Формат H1 для названия статьи-----*/

#zagolovok{

        margin:0;

        font-size: 1.5em;

        text-align:left;

        padding-left:30%;

}



/*--Обо мне-----*/

#obo_mne{

        background-color: #d7e0e5;

        font-family: Arial, Helvetica, sans-serif;

        width:80%;

}

#obo_mne1{

        width:40%;

        padding: 5px;

}



/*--Выравниваем заголовок и контакты-----*/

#pered_k{

        

        width:50%;

}

#kont_h{

        background-color: #d7e0e5;

        font-style:italic;

        font-size: 1.1em;

        margin:0;

        text-align:left;

        /*text-shadow: 2px 2px 2px #fff;*/

        padding-left:20px;

        padding-top: 20px;

}

#kontakty{

        background-color: #d7e0e5;

        font-style:italic;

        font-size: 1.1em;

        margin:0;

        text-align:left;

        /*text-shadow: 2px 2px 2px #fff;*/

        padding-left:20px;

}

#kontakty1{

        background-color: #d7e0e5;

        font-style:italic;

        margin:0;

        text-align:center;

        /*text-shadow: 2px 2px 2px #fff;*/

        /*padding-left:20px;*/

}

#kontakty2{

        list-style-type: square outside;

        margin:0;

        text-align:left;

        padding-left:10%;

}



/*--Меню только на CSS-----*/

.tnav{

        background-color:#fsfsfs;

        border:none;

        width:100%; 

}

.nhr{

        border:0px;

        margin: 0;

    padding: 0;

}

/*--Стиль тонкой линии, из-за отступов в ИЭ-----*/

div.nhr hr {display:none;}

div.nhr {

  border-top:1px #42595f solid; /*#ccc*/

  height:1px;font-size:0px;

  line-height:0px;

  margin-bottom:-1px;

  clear:both;

}

nav{

    width: 960px;

        margin: 5px auto;

        text-align: center;

}         

nav ul{

        *display: inline;

    margin: 0;

    padding: 0;

}

nav li{

    margin: 0 10px; /* Добавляем поле по горизонтали */

    display: inline-block;

    *display: inline;  /* IE7 и хуже */

    zoom: 1;

}

nav a{

    display: inline-block;

    position: relative;

    padding: 8px 15px;

    border: 2px solid #fff;

    text-decoration: none;

    color: #42595f;/*#999;*/

    font: bold 14px 'Lucida sans', Arial, Helvetica;

    background-color: #d7e0e5;

    background-image: linear-gradient(top, #F5F5DC/*#eaeaea*/, #fff);

    border-radius: 3px;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,

                0 0 1px 0 rgba(0, 0, 0, .2),

                0 2px 2px rgba(0, 0, 0, .3),

                0 10px 10px -5px rgba(0, 0, 0, .2);

}

nav a:hover{

    background-color: #42595f;/*#eee;*/

    background-image: linear-gradient(top, #eee, #fff);

        color: #F5F5DC;/*#fbef99;/*#999;*/

}       

nav a:active{

    top: 1px; /* Имитируем нажатие кнопки */

    background: #f5f5f5;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,

                0 0 1px 0px rgba(0, 0, 0, .2),

                0 1px 2px rgba(0, 0, 0, .3);

}



.content {

    padding-bottom: 56px;  

}



/*--Центральная таблица--*/

.seredina{

        border: 0;

        box-sizing: border-box;

                

}



.footer {

        position: absolute;

        background-color:#42595f;

        height: 80px;

        

    left: 0;

    bottom: 0;

    width: 100%;

        text-align:center;

}



/*--Шрифт в подвале страницы-----*/

.bottom {font-family: Arial, Helvetica, sans-serif; font-size:1.0em; color:#999966; margin:0; padding-top:-5px; vertical-align:top; display:block;}

Спасибо...

znak-ognya, у Internet Explorer младше 9 версии существуют проблемы с обработкой данного свойства.
Различные варианты решения сей проблемы описаны в данной статье: Как заставить background-size работать в старых IE.
Из описанных способов я бы посоветовал "родной костыль", описанный первым:

Код:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fon11.jpg', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fon11.jpg', sizingMethod='scale')";

Т.к. данное свойство не повлияет на остальные браузеры :)

Habetdin,
спасибо про старые браузеры, но я их даже не имею в виду...
На 10-ке стоит новенький Edge и запускается бывший родной (самый последний) Интернет Эксплорер...
В них и смотрю... Edge вообще не хочет воспринимать локалхост как таковой!.. (Ещё не искал решение по данному вопросу (Денвер)) А ИЭ (новый) упорно не растягивает...
(Если учитывать, что процентов 70 используют пиратки, то они явно не пользуются ИЭ, а ставят нормальные браузеры, в этом плане, повезло нам со страной!..)))
Поэтому хотя бы новый ИЭ заставить... Но у меня не получается...
Сейчас статью перечитаю, может что-нибудь извлеку...

Цитата:

Цитата znak-ognya

(самый последний) Интернет Эксплорер »

Проверьте, не включил ли он для вашей страницы режим совместимости, в котором он имитирует старые версии (причем IE11 может имитировать аж IE версии 5 :cool:)
"Попросить" IE использовать последнюю версию движка можно, добавив в секцию <head> следующий meta-тег раньше других meta-тегов:

Код:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

И проверив, что используется HTML5 doctype в начале страницы:

Код:

<!DOCTYPE html>

Habetdin,
в статье описываются мои любимые jQuery, попробую с ними почудить, написано, что если background-size не поддерживается, то они могут помочь старым браузерам, а может ещё и новым, заодно и проверю...)))

Habetdin,
о, спасибо, испытаю ваш совет сначала!..
А по второму вопросу, видимо должен и этот совет (про мета-теги) помочь?..

Habetdin,
то есть мне проще добавить тег?!? Ведь, если он и у других людей будет имитировать, значит и у них буду косяки, а люди, они -- люди!..
Наверное, будет лучше добавить тег, всё же?..
Как испытаю, напишу...

Habetdin,
Здравствуйте, помогла одна единственная строка (старые браузеры не смотрел, даже заморачиваться не буду, люди хламом не пользуются)...

Код:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

По вопросу открытия Edge localhost'a нашёл решение в интернете http://open-server.ru/forum/viewtopic.php?t=2149

Спасибо...)))

Приписка: Ещё раз перепроверю всё, чтобы не возникло проблем с нормальным хостингом...

Habetdin,
Здравствуйте, появился вопрос:

Код:

.footer {

        position: absolute;

        background-color:#42595f;

        height: 80px;

        

    left: 0;

    bottom: 0;

    width: 100%;

        text-align:center;

}



/*--Шрифт в подвале страницы-----*/

.bottom {font-family: Arial, Helvetica, sans-serif; font-size:1.0em; color:#999966; margin:0; padding-top:-5px; vertical-align:top; display:block;}

при уменьшении окна браузера (меньше 800х600), в двух браузерах ИЭ и Хром, уменьшается ширина футера (только у них), а в Хроме ещё и фон страницы, который сейчас красиво растягивается для всех браузеров... (В Хроме получается белая полоса внизу фона)...
Фон-то я могу сделать под цвет низа фотографии (если ничего не найду), а как быть с футером?..
Почему он уменьшается?..
Спасибо...

Цитата:

Цитата znak-ognya

а как быть с футером?.. »

Попробуйте добавить в .footer свойство, задающее минимальную ширину футера:

Цитата:

min-width: 600px;

Habetdin,
нашёл ошибку, очень долго искал, а решение оказалось довольно простое... При уменьшении окна уменьшалось body, выставил ему min-width...
Вопрос: страницы у меня добавляются html-кодом из базы данных, и начинаются отнюдь не с тега <html>, а типа <div> или <table>, возможно ли в неуказанной (<html> странице) прописывать мета-теги?.. Или это будет неправильно, с точки зрения правильного кода?..
Спасибо...

Цитата:

Цитата znak-ognya

возможно ли в неуказанной (<html> странице) прописывать мета-теги? Или это будет неправильно, с точки зрения правильного кода? »

Да, страница с мета-тегами вне секции <head> будет неправильной согласно стандартам HTML, но при этом некоторые браузеры обрабатывают и такие мета теги - Frefox, например, переносит их в тот самый <head>. Как отреагирует IE - не знаю, если у вас работает - замечательно :)