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

Я обнаружил, что граница 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, и вы можете увидеть, как граница появляется постепенно. Это подтверждает мое предположение, что эффект градиента отображается над границей.

Ответы

Ответ 1

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

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

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

Ответ 2

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

position: relative;
z-index: -1;

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

позиция использования: относительная! important;

Его работа прекрасна...

Ответ 6

на td:

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

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

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

  border-collapse: separate

и

  border-collapse: collapse

Ответ 7

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

 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;
}

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