Ячейка таблицы теряет границу при применении фильтра градиента CSS в IE8

Question

Я обнаружил, что граница css в ячейке таблицы теряется при одновременном применении градиентного фильтра css.Кажется, что эффект градиента перекрывает границу.

Это ошибка браузера или я что-то здесь упускаю?

Стиль определяется так:

.c7 {
    color: #000000;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0'); 
    border: #000000 1px solid;
    width: 100px;
    height: 30px;
}

[Обновление] Вы можете применить фильтр непрозрачности и уменьшить его со 100 до 1, и вы можете видеть, как граница появляется постепенно.Это подтверждает мое предположение, что эффект градиента проявляется за границей.

Answer 1

Применение этого также работает:

position: relative;
z-index: -1;

Answer 2

Используйте DIV для содержания в каждой ячейке.Примените градиент к DIV и поместите границу в ячейку.Градиент будет ограничен DIV и не будет перезаписывать границу.

http://jsfiddle.net/WWCaj/1/

Answer 3

Я нашел исправление, но оно вам может не понравиться ...

Если вы визуализируете в IE в режиме Причуды Граница отрисовывается нормально, она только затемняется, если выВы используете режим совместимости.Сравните эти две страницы в IE8:

• С объявлением DOCTYPE
  • http://www.boogdesign.com/examples/css3/borders-tables-gradients-1.png
• Без DOCTYPE декларации
  • http://www.boogdesign.com/examples/css3/borders-tables-gradients-2.png

Также работает нажатие кнопки просмотра совместимости, но мои попытки получитьте же результаты с мета-тегами режима совместимости оказались безуспешными.Я пытался использовать box-sizing, но также безуспешно.Я пришел к выводу, что единственный способ заставить его работать так, как вы хотите, - это заставить IE перейти в режим причуд, но это может создать так много других проблем для макета, что вам может быть лучше просто добавить элемент-обертку, к которому прикрепляется ваш градиентный фон.1034 *

Answer 4

После множества исправлений я пришел к выводу, что использовать фильтр CSS просто не стоит. цитата из @ mdo , которая стоит за загрузкой Twitter css:

Фильтры - это опасное дело в IE, особенно в 7 и 8. Я бы предпочел не включать их, потому что это было бы огромной потерей производительности для людей, которые злоупотребляют ими.

Проблемы, с которыми я столкнулся, применяя css к td элементам:

• position: relative работает только для IE9, а не для IE8
• z-index: -1 не работает с элементами td
• Если у вас есть фильтр, вы должны выключить его для зависания
• Моя таблица выглядела лучше с границами, чем с градиентом в ячейках таблицы

Answer 5

тд:

  /* enough for IE9 */
  background-origin: padding-box;
  background-clip: padding-box;
  /* for IE8 */
  position: relative;

работал на меня.

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

  border-collapse: separate 

и

  border-collapse: collapse

Answer 6

используйте позицию: относительный! Важный;

Хорошо работает ...

Answer 7

Я попробовал все эти решения безуспешно.Итак, я поместил градиент в tr, а затем решил использовать псевдоэлемент :: before и наложить на него границу.Тем не менее, я даже не дошел до добавления границы к псевдоэлементу.Было достаточно следующего:

 table thead {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
}
table th { 
   background: none;
   border-right: 1px solid #a5a694; 
   background-clip: padding-box;
   position: relative!important; 
   z-index: 100;
}
table th:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
}

Но если это не сработало, вы также можете добавить границу к псевдоклассу, как я планировал изначально:

table th:before {
    border-right: 1px solid #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    z-index: 1000;
}

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