Z-index IE8 ошибка в сгенерированном содержимом с: после

Ответ 1

Прежде всего, чтобы ответить на ваш последний вопрос, если вам не нужно поддерживать какие-либо браузеры, которым не хватает поддержки сгенерированного контента (http://caniuse.com/#feat=css-gencontent), тогда вам не нужно его избегать. Однако, поскольку вы отмечаете, что это известная ошибка, вы должны быть осторожны.

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

• Используйте :after вместо :before и удалите позиционирование из дочернего div: http://jsfiddle.net/AjCPM/24/

  #target {
      position: relative;
      width: 200px;
      height: 200px;
      z-index: 1;
  }
  
  #target>div{
      background: red;
      width: 200px;
      height: 200px;
  }
  
  #target:after {
      content: "after";
      position: absolute;
      top: 0;
      left: 10%;
      width: 100%;
      height: 100%;
      background: cyan;
      z-index: 10;
  }
  

• Добавьте потом к дочернему элементу div вместо родителя: http://jsfiddle.net/AjCPM/26/

  #target {
      position: relative;
      width: 200px;
      height: 200px;
      z-index: 1;
  }
  
  #target>div{
      position: relative;
      background: red;
      width: 200px;
      height: 200px;
      z-index: 0;
  }
  
  #target>div:before{
      content: "after";
      position: absolute;
      top: 0;
      left: 10%;
      width: 100%;
      height: 100%;
      background: cyan;
      z-index: 10;
  }
  

• Используйте элемент обертывания (обычно потому, что у вас уже есть), чтобы применить базовый стиль: http://jsfiddle.net/AjCPM/29/

   <div id="target">
       <div id="wrap">
           <div>div</div>
       </div>
   </div>
  
  #target {
      position: relative;
      width: 200px;
      height: 200px;
      z-index: 1;
  }
  
  #wrap>div{
      position: relative;
      background: red;
      width: 200px;
      height: 200px;
      z-index: 0;
  }
  
  #wrap>div:before{
      content: "after";
      position: absolute;
      top: 0;
      left: 10%;
      width: 100%;
      height: 100%;
      background: cyan;
      z-index: 10;
  }
  

В принципе, когда вы сталкиваетесь с различием в интерпретации между такими браузерами, лучше всего попытаться перестроить свой подход, чтобы найти что-то, что работает в кросс-браузере.

Ответ 2

Не нужно устанавливать z-index es, просто используйте :after вместо :before (demo):

#target {
    position: relative;
    width: 200px;
    height: 200px;
}
#target>div{
    background: red;
    width: 200px;
    height: 200px;
}
#target:after {
    content: "after";
    position: absolute;
    top: 0;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
}​

Так как сгенерированное содержимое появляется после #target, оно, естественно, будет сложено сверху.

BTW Независимо от того, продается ли продукт или нет, это семантическая информация, поэтому правильное семантическое решение должно включать его в HTML, а не добавлять изображение через CSS.

Ответ 3

Быстрая заметка: перед и: после селекторов в IE8: для их работы вам нужно объявить DOCTYPE. См. эту страницу W3Schools. Я предполагаю, что вы уже это сделали.

См. ответ на этот вопрос, если вы еще этого не сделали (думаю, вы, вероятно,).

В основном, суть в том, что это ошибка. Ваше решение использовать z-index of -1 не является идеальным, но затем снова NO работать вокруг для ошибки будет идеальным. Я не думаю, что использование z-индекса -1 - это нечто, о чем нужно беспокоиться, если оно не вызывает проблем в вашем макете. Если вы очень обеспокоены, то почему бы вам не использовать ТОЛЬКО IE8 с исправлением. Например, вы можете использовать условный комментарий, например:

<!--[if IE 8]>
<style>
#target>div{
  z-index:-1;
}
</style>
<![endif]-->

Поведение, подобное тому, которое вы испытываете, является одной из причин, по которой многие разработчики презирают IE. Во многих случаях, включая этот, нет идеального решения. Вы могли:

• прекратите использование селекторов :before и :after и настройте свой HTML/CSS на то, что является удобным для IE8.
• Используйте условные комментарии или JavaScript для выпуска исправления, специально предназначенного для IE8
• Продолжайте взломать и попытайтесь найти еще один комбо HTML/CSS, который работает - но, скорее всего, он не будет более идеальным, чем ваше отрицательное решение z-index.

К сожалению, во многих случаях нет такой вещи, как "семантически правильный" веб-сайт с несколькими браузерами.

Мои два цента - создать таблицу стилей IE8 и использовать приведенный выше условный комментарий для загрузки таблицы стилей. В таблице стилей используйте решение z-index: -1, с которым вы столкнулись. Многие веб-сайты используют таблицы стилей, ориентированные на IE.

Ответ 4

Я использую другой метод для решения этой проблемы:

HTML для каждого продукта содержит "распроданный" баннер, который можно разместить над основным изображением. По умолчанию CSS скрывает этот элемент. Если оберточный "продукт" DIV содержит класс "soldOut", CSS переопределит объявление по умолчанию и отобразит баннер.

<div class="product soldOut">                                   
    ... product html ...
    <div class="soldOutBanner"></div>    
</div>

CSS

.soldOutBanner {
     display:none
}

.soldOut .soldOutBanner {
    display:block; 
    width:133px;
    height:130px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:10;
    background-image:url(../SoldOut.png);
}