В Internet Explorer 9 проблема отображения div.post-outer

02 дек 2011, 10:46 Celsus

Черный прозрачный блок - div.post-outer

Opera и Chrome:
http://linkme.ufanet.ru/images/451a4346 ... 1acc05.jpg

В Internet Explorer:
http://linkme.ufanet.ru/images/3f7a55d7 ... d09e65.jpg

Раньше был такой код, вроде:

Код:: .post-outer { background-color: $(post.background.color); border: solid 1px $(post.border.color); -moz-border-radius: $(post.border.radius); -webkit-border-radius: $(post.border.radius); border-radius: $(post.border.radius); -goog-ms-border-radius: $(post.border.radius); padding: 15px 25px; margin: 0 $(post.margin.sides) 15px;

Я измемнил последнюю строчку на 20px, чтобы выровнять картинку по центру

В IE код такой:

Код:: .post-outer { background-color: #1c1c1c; border: solid 1px transparent; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -goog-ms-border-radius: 0; padding: 15px 25px; margin: 0 -20px 20px; }

Как вино из последнего кода в параметр margin IE9 видит только 3 значения, разве их не должно быть четыре?

03 дек 2011, 04:19 sv9t

Celsus писал(а):Как вино из последнего кода в параметр margin IE9 видит только 3 значения, разве их не должно быть четыре?

можно и так,он их не "видит"а так прописано, читайте здесь

05 дек 2011, 15:07 Celsus

sv9t писал(а):

Celsus писал(а):Как вино из последнего кода в параметр margin IE9 видит только 3 значения, разве их не должно быть четыре?

можно и так,он их не "видит"а так прописано, читайте здесь

Спасибо. Есть еще одна проблема с IE 9. Не получается сделать отображаемый фон для post-outer. Не обязательно градиентовый и вертикальный, просто прозрачный черный.

Код:: .post-outer { background:rgba(136,191,239,0.65); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 46%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(46%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 46%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 46%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 46%,rgba(0,0,0,0.65) 100%); /* IE10+ */ background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 46%,rgba(0,0,0,0.65) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ -webkit-border-radius:0 0 27px 27px; -goog-ms-border-radius:0 0 27px 27px; border-radius:0 0 27px 27px; padding: 15px 20px; margin: 0 $(post.margin.sides) 0px; }

Работает только в других браузерах (Chrome, opera)

Могут ли где-то быть другие параметры, которые влияют на post-outer?

В .content-outer прозрачный градиент в IE работает (правда, там не отображается рамка, отображается только на мгновение =)

На всякий случай пример работающего в IE9 фона для content-outer

Код:: .content-outer { font-size: 90%; /*border-bottom:1px solid rgba(255,255,255,0.30); border-right:1px solid rgba(255,255,255,0.30);*/ /* background: $(content.background); */ background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(136,191,239,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(136,191,239,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(136,191,239,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(136,191,239,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(136,191,239,0) 100%); /* IE10+ */ background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(136,191,239,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ padding:0; margin: $(content.margin) auto; -moz-box-shadow: inset 0px 0px 18px 0px #161617, ; -webkit-box-shadow: inset 0px 0px 18px 0px #161617; -goog-ms-box-shadow: inset 0px 0px 18px 0px #161617; box-shadow: inset 0px 0px 18px 0px #161617; -moz-border-radius:15px 15px 200px 40px; -webkit-border-radius:15px 15px 200px 40px; -goog-ms-border-radius:15px 15px 200px 40px; border-radius:15px 15px 200px 40px; }

Проверил, дубликатов .post-outer нет (иногда бывают =), стандартный параметр background-color: $(post.background.color); удалил

05 дек 2011, 17:09 sv9t

Celsus писал(а):background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 46%,rgba(0,0,0,0.65) 100%); /* IE10+ */

Уже IE10 вышел?))

У тебя коды разные из работающего и неработающего, скопируй с рабочий и вставь в верхний.
Насколько мне известно IE9 поддерживает opacity:.

Код:: -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter:alpha(opacity=65); opacity: 0.65;

Может попробовать прописать так? и background-color: черным поставь.
Или вот наткнулся на интересное решение, реализованное в js, можешь тоже попробовать), мне увы негде. Тем более придаешь такое значение IE.
А так, имхо, плюнь на IE и напиши что "для правильного отображение сайта желательно использовать последние версии браузеров". Этим IE в основном пользуются только за рубежом.

10 дек 2011, 19:05 Celsus

sv9t писал(а):Насколько мне известно IE9 поддерживает opacity:.

Код:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter:alpha(opacity=65); opacity: 0.65;

Может попробовать прописать так? и background-color: черным поставь.

Спасибо за вариант с opacity для обоих версий (10 и 9). Думаю, это и будет альтернатива, поскольку при использовании градиента и прозрачности, в Internet Explorer 9 с отображением возникает проблема

sv9t писал(а):А так, имхо, плюнь на IE и напиши что "для правильного отображение сайта желательно использовать последние версии браузеров". Этим IE в основном пользуются только за рубежом.

Хорошая идея, обязательно так сделаю, посоветую Chrome или Opera или Firefox (до последнего никак не дойдут руки).

Добавлено спустя 1 минуту 27 секунд:
Re: В Internet Explorer 9 проблема отображения div.post-outer
Градиент я сделал на сервисе colorzilla (gradient editor)