|
|
|
|
| Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » background-size:100% и Интернет Эксплорер |
|
||||
|
|
background-size:100% и Интернет Эксплорер
|
|
Новый участник Сообщения: 34 |
Здравствуйте,
Причина: Делаю простенький сайт-визитку, захотелось сделать фон фотографией, размером чуть меньше, чем монитор 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;}
|
|
|
Отправлено: 08:26, 25-05-2016 |
Сообщения: 3652
|
Профиль | Сайт | Отправить PM | Цитировать 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')";  |
|
------- Отправлено: 19:35, 25-05-2016 | #2 |
|
Новый участник Сообщения: 34
|
Профиль | Отправить PM | Цитировать Habetdin,
спасибо про старые браузеры, но я их даже не имею в виду... На 10-ке стоит новенький Edge и запускается бывший родной (самый последний) Интернет Эксплорер... В них и смотрю... Edge вообще не хочет воспринимать локалхост как таковой!.. (Ещё не искал решение по данному вопросу (Денвер)) А ИЭ (новый) упорно не растягивает... (Если учитывать, что процентов 70 используют пиратки, то они явно не пользуются ИЭ, а ставят нормальные браузеры, в этом плане, повезло нам со страной!..))) Поэтому хотя бы новый ИЭ заставить... Но у меня не получается... Сейчас статью перечитаю, может что-нибудь извлеку... |
|
Отправлено: 14:20, 26-05-2016 | #3 |
|
Сообщения: 3652
|
Профиль | Сайт | Отправить PM | Цитировать Цитата znak-ognya:
 )"Попросить" IE использовать последнюю версию движка можно, добавив в секцию <head> следующий meta-тег раньше других meta-тегов: Код:
<meta http-equiv="X-UA-Compatible" content="IE=edge"> Код:
<!DOCTYPE html> |
|
|
------- Отправлено: 14:42, 26-05-2016 | #4 |
|
Новый участник Сообщения: 34
|
Профиль | Отправить PM | Цитировать Habetdin,
в статье описываются мои любимые jQuery, попробую с ними почудить, написано, что если background-size не поддерживается, то они могут помочь старым браузерам, а может ещё и новым, заодно и проверю...))) Habetdin, о, спасибо, испытаю ваш совет сначала!.. А по второму вопросу, видимо должен и этот совет (про мета-теги) помочь?.. |
|
|
Отправлено: 15:20, 26-05-2016 | #5 |
|
Новый участник Сообщения: 34
|
Профиль | Отправить PM | Цитировать Habetdin,
то есть мне проще добавить тег?!? Ведь, если он и у других людей будет имитировать, значит и у них буду косяки, а люди, они -- люди!.. Наверное, будет лучше добавить тег, всё же?.. Как испытаю, напишу... |
|
Последний раз редактировалось znak-ognya, 26-05-2016 в 17:46. Отправлено: 17:32, 26-05-2016 | #6 |
|
Новый участник Сообщения: 34
|
Профиль | Отправить PM | Цитировать Habetdin,
Здравствуйте, помогла одна единственная строка (старые браузеры не смотрел, даже заморачиваться не буду, люди хламом не пользуются)... Код:
<meta http-equiv="X-UA-Compatible" content="IE=edge"> Спасибо...))) Приписка: Ещё раз перепроверю всё, чтобы не возникло проблем с нормальным хостингом... |
|
Отправлено: 12:18, 31-05-2016 | #7 |
|
Новый участник Сообщения: 34
|
Профиль | Отправить PM | Цитировать 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;}
Фон-то я могу сделать под цвет низа фотографии (если ничего не найду), а как быть с футером?.. Почему он уменьшается?.. Спасибо... |
|
Отправлено: 18:45, 03-06-2016 | #8 |
|
Сообщения: 3652
|
Профиль | Сайт | Отправить PM | Цитировать |
|
------- Отправлено: 05:57, 05-06-2016 | #9 |
|
Новый участник Сообщения: 34
|
Профиль | Отправить PM | Цитировать Habetdin,
нашёл ошибку, очень долго искал, а решение оказалось довольно простое... При уменьшении окна уменьшалось body, выставил ему min-width... Вопрос: страницы у меня добавляются html-кодом из базы данных, и начинаются отнюдь не с тега <html>, а типа <div> или <table>, возможно ли в неуказанной (<html> странице) прописывать мета-теги?.. Или это будет неправильно, с точки зрения правильного кода?.. Спасибо... |
|
Отправлено: 18:28, 28-06-2016 | #10 |
|
|
Участник сейчас на форуме |
 |
Участник вне форума |
 |
Автор темы |
 |
Сообщение прикреплено |
| |||||
| Название темы | Автор | Информация о форуме | Ответов | Последнее сообщение | |
| не запускается интернет эксплорер | Xwolf | Microsoft Windows 2000/XP | 2 | 26-04-2007 09:45 | |
| Закрывается Интернет Эксплорер!!! | Drony | Microsoft Windows 2000/XP | 10 | 15-03-2007 03:06 | |
| Интернет - [решено] Интернет Эксплорер 7 + кэш | pr-lp | Microsoft Windows Vista | 1 | 28-12-2006 21:24 | |
| AJAX - интернет эксплорер виснет | VeshchiyOleg | Вебмастеру | 19 | 17-08-2006 14:12 | |
| Интернет эксплорер /експлорер | Vadslav | Microsoft Windows 95/98/Me (архив) | 10 | 09-03-2004 15:06 | |
|
|
Время: 01:51. | © OSzone.net 2001-
|
|
Powered by: vBulletin Copyright ©2000 - 2025, Jelsoft Enterprises Ltd. |
