CSS3 делает :: after наследует высоту и поле элемента origin в IE9? - PullRequest
Новая
       17

CSS3 делает :: after наследует высоту и поле элемента origin в IE9?

0 голосов
/ 23 августа 2011

У меня есть этот HTML: 

<div class="demo">hello world</div>

и этот CSS: 

 .demo { width: 100px; 
         height: 50px; margin-bottom: 50px; 
         background-color: red; position: relative;
         z-index:-1;
         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40ffffff,EndColorStr=#12ffffff);zoom: 1;}
 .demo::after { 
         width: 95px; 
         height: 95px; 
         position: absolute; left: 0; top: 0; border: 5px solid blue; content:""; 
         background-color: yellow; opacity: .75;}

Я хотел, чтобы псевдоэлемент полностью покрывал исходный элемент (который содержит градиент 50% для IE7,8 - следовательно, высота: 50%, margin-bottom: 50%;)

Однако в IE9 ... элемент :: after покрывает только 50%, хотя я специально установил высоту в 44px. Это из-за использования фильтра? Есть идеи, как это переопределить?

Вот пример JSBin .

Спасибо за помощь.

UPDATE

Вот пример всего этого:

* ** 1023 тысяча двадцать-дв * Пример

Примечания:

  • см. Комментарии в файле background.css
  • Я не могу изменить структуру элемента или назначить градиент любому другому элементу, кроме .ui-icon
  • Градиент должен покрывать 50% нижнего колонтитула. Нижний колонтитул составляет 44px, поэтому градиент останавливается на 22px
  • IE7 + 8 не может этого сделать (или цвет останавливается), поэтому я сделал .ui-icon height 22px плюс filter-градиент
  • используя :: перед добавлением градиента для всех других браузеров, расположенных поверх .ui-icon

Проблема 1 = IE9 + визуализирует :: before - я использую z-index: -1, поэтому .ui-icon находится позади :: before = OK

Проблема 2 = в IE9 + :: перед фоном обрезается с помощью .ui-icon.

Вопрос: Как я могу избежать градиента в :: до того, как его обрежут?

1 Ответ

1 голос
/ 23 августа 2011

Это из-за использования фильтра?Есть идеи, как это переопределить?

Да, это из-за filter.Использование filter вызывает эффект overflow:hidden.

Возможно, вы знаете, что :after визуализируется внутри элемента, например: 

<div class="demo">hello world<div:after></div:after></div>

Если вы добавите overflow: hidden, тогда все браузеры одинаково сломаны: http://jsbin.com/otilux/3

Итак, как это исправить?Один из вариантов - использовать ::before для обработки рисунка с filter.

См .: http://jsbin.com/otilux/4

Это выглядит так же, как и раньшев Chrome / Firefox, и теперь также выглядит так же в IE9.

Из-за использования ::after вместо :after я вижу, что вы не пытаетесь поддерживать IE8.Таким образом, другой вариант будет использовать SVG градиент вместо filter.

...