Непрозрачность не работает в IE8

Question

Я нашел много похожих вопросов на сайте, но ничто не приблизилось к моему спасению. Я динамически добавляю div к элементу, и в этом div я упомянул атрибут непрозрачности стиля, как показано ниже.

$('#cell').append('<div id="el_loading" 
style="-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
filter: alpha(opacity=50);
opacity:0.5;
background-color: #fbfbfb;
height: 100%;
width:100%;
position:relative
;z-index:9999;">
<div style="top: 74.2px; width: 91px;">
<img  src="/myimage/loading.gif" title="Please Wait..." />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>');

Это делается для размытия страницы при отправке запроса ajax на сервер. Этот фрагмент кода написан в области javascript, и, следовательно, я использую встроенный стиль. Вышеописанный стиль отлично работает в IE10, но не в IE8.

Answer 1

Пожалуйста, переместите ваши CSS-скрипты в ваш собственный CSS-файл.

Например:

• создайте файл с именем style.css, затем вставьте следующий код:

#el_loading {
    / * IE 8 * /
    -ms-фильтр: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)";

    / * IE 5-7 * /
    фильтр: альфа (непрозрачность = 50);

    / * Netscape * /
    -моз-непрозрачность: 0,5;

    / * Safari 1.x * /
    -хтмл-непрозрачность: 0,5;

    / * Хорошие браузеры * /
    непрозрачность: 0,5;

    цвет фона: #fbfbfb;
    высота: 100%;
    ширина: 100%;
    позиция: относительная; Г-индекс:9999;
}

ваш сценарий таков:

$('#cell').append('<div id="el_loading">
    <img  src="/myimage/loading.gif" title="Please Wait..." />
    <span>
        <b>Please wait ...</b>
    </span>
    </div>
</div>');

Надеюсь, это поможет.

Answer 2

Попробуйте добавить следующее

 -moz-opacity: 0.50;
    opacity:.50;
    filter: alpha(opacity=50);

Так твой код станет

$('#cell').append('<div id="el_loading" 
style="-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity:.50;
filter: alpha(opacity=50);
background-color: #fbfbfb;
height: 100%;
width:100%;
position:relative
;z-index:9999;">
<div style="top: 74.2px; width: 91px;">
<img  src="/myimage/loading.gif" title="Please Wait..." />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>');

Answer 3

Используйте одинарную кавычку для filter внутри тега стиля.

 $('#cell').append("<div id='el_loading' 
 style='-ms-filter:\progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\; /* double quote will end your style here only. So use single quote. */
 filter: alpha(opacity=50);
 opacity:0.5;
 background-color: #fbfbfb;
 height: 100%;
 width:100%;
position:relative;z-index:9999;'>
<div style='top: 74.2px; width: 91px;'>
<img  src='/myimage/loading.gif' title='Please Wait...' />
<span>
<b>Please wait ...</b>
</span>
</div>
</div>");