Ползунок не отображается правильно в IE8

Question

Мой ползунок отображается в Chrome, Firefox и большинстве версий IE, но не в IE8. Его фон остается того же цвета, что и остальная часть страницы.

.site-slider { 
    width: 100%; 
    background: url(images/alexandria/header_overlay.png) no-repeat center top, 
       url(images/alexandria/header_bg.jpg); 
} 

Если изменить background к background-image, каждый браузер показывает то же самое, что IE8 делает.

Answer 1

IE doesn’t support multiple backgrounds until version 9. Вы можете обойти эту проблему путем добавления элемента-оболочки и применяя один фон для родителя и один для ребенка.

.site-slider-wrapper { 
    background-image: url(images/alexandria/header_bg.jpg); 
} 

.site-slider { 
    background: url(images/alexandria/header_overlay.png) no-repeat center top; 
} 

Причина изменения имени свойства в background-image перерывах в CSS в любом браузере, что первый фон наборы background-repeat и background-position свойства (no-repeat center top), а также, которые не являются действительными в рамках background-image. (Весь смысл background должен быть обобщающим для background-* свойств.)

Answer 2

Вы используете CSS3 «Несколько фонов» особенность, которая не поддерживается в IE8. См. Его опору на this link

Пожалуйста, прочтите this tutorial и найдите заголовок, где указано «Несколько фонов». Здесь вы найдете способ заставить это свойство работать и на IE8.

Во-вторых, background свойство является обобщающим, где вы можете объединить/определить значения для следующих свойств:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Например: background: #00ff00 url("smiley.gif") no-repeat fixed center;

С другой стороны, если вы используете какой-либо свойство из списка выше, он будет принимать только значения специфичные для них. Они не будут работать, если вы попытаетесь совместить с ними другое значение свойства. По этой же причине ваше свойство background-image не работает. Вы можете определить только url изображения в качестве значения background-image

Eg: background-image: url("paper.gif");

Answer 3

Спасибо большое за ваши ответы! Предложение обертки работало хорошо. У меня есть еще один вопрос относительно IE (или, по крайней мере, ie8):

Шрифты в заголовке и слайдере отображаются неправильно. См. Изображение, которое я приложил.

Заголовок:

.site-title a, .site-title a:visited{ 
font-family: 'TitilliumText22LMedium'; 
font-size: 60px; 
font-size: 6.0rem; 
color: #fff; 
text-decoration:none; 
line-height:1.1; 

Slider:

.site-slider-slider-one-text-heading{ 
width:86%; 
margin:0 7% 0 7%; 
padding:0 0 40px 0; 
text-align:center; 
font-size:60px; 
font-size:6.0rem; 
text-shadow: 1px 1px #000000; 
color:#fff; 
line-height:1.0; 
font-family:'TitilliumText22LMedium'; 

шрифта:

@font-face { 
font-family: 'TitilliumText22LMedium'; 
src: url('skins/fonts/titillium/TitilliumText22L004-webfont.eot'); 
src: url('skins/fonts/titillium/TitilliumText22L004-webfont.eot?#iefix') format('embedded-opentype'), 
    url('skins/fonts/titillium/TitilliumText22L004-webfont.woff') format('woff'), 
    url('skins/fonts/titillium/TitilliumText22L004-webfont.ttf') format('truetype'), 
    url('skins/fonts/titillium/TitilliumText22L004-webfont.svg#TitilliumText22LMedium') format('svg'); 
font-weight: normal; 
font-style: normal; 

http://s22.postimg.org/tksa8ygq7/comparison2.png

вид Совместимость решает эту КСТАТИ

Answer 4

Добавление этой линии

src /*\**/: url('skins/fonts/titillium/TitilliumText22L003-webfont')\9 

казалось исправить ...