Границы заголовка таблицы исчезают в IE8 с градиентным фоном

Мои таблицы вызывают проблемы в IE8. Я не могу заставить разделительные границы в заголовке таблицы отображаться над градиентом (за исключением одного места, которое вы можете видеть на изображении ниже). Границы отображаются нормально в любом другом браузере и даже в режиме совместимости с IE8. Есть какие нибудь идеи как это починить? Вот тестовый сайт, на котором каждый может увидеть примененный код.

Сравнение границ заголовка таблицы в IE8 и в режиме совместимости с IE8

Вот CSS заголовка таблицы, но вы можете просмотреть весь файл CSS здесь:

.gridview th {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNTM4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhmZDlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
    background-image: -webkit-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: -moz-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: -o-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: -ms-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383)";
    background-color: #005383;
    line-height: 18px;
    vertical-align: top;
    padding: 4px;
    font-weight: bold;
    text-align: center;
    border-left: 1px solid #005580;
    color: #fff;
}

css border css-tables internet-explorer-8
person Jonathan    schedule 21.08.2012    source источник
comment
Как и в ответе @DextrousDave, это фактически дубликат stackoverflow.com/questions/3465346/ - где position: relative на вашем th это исправит.   -  person icc97    schedule 29.03.2013
comment
Возможный дубликат ячейки таблицы теряет границу, когда Градиентный фильтр css применяется в IE8   -  person Brian Tompsett - 汤莱恩    schedule 07.10.2017

Ответы (4)


arrow_upward
1
arrow_downward

Я пытался решить вашу проблему, но не смог. Я вижу, что это происходит как в IE8, так и в IE9 в режиме документа и браузера. Однако не в IE 7. Но при использовании только

 background-image: url(data:image/.......);

границы работают в IE9... это решает только IE 8. Вы можете использовать специальные условные комментарии для IE7 и IE9, чтобы использовать приведенный выше код (для IE9) и

filter: progid:DXImageTransform.Microsoft

для ИЕ7. По поводу проблемы в IE8 вот похожий пост:

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

person DextrousDave    schedule 21.08.2012
comment
Спасибо за эту ссылку... Я создал исправление (хотя я им не очень доволен), которое разместил здесь. Я бы не подумал об этом без вашей ссылки, поэтому я ценю помощь! - person Jonathan; 22.08.2012

arrow_upward
0
arrow_downward

Я нашел исправление, но я не очень доволен им, так как он больше не является допустимым HTML... но это, похоже, устраняет проблему в более старых версиях IE:

<!--[if !IE]> -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <![endif]-->

Я показал это своему боссу, он не одобрил, так что я все еще ищу решение!!!

person Jonathan    schedule 21.08.2012

arrow_upward
0
arrow_downward

Добавление этого в мой css было для меня решением:

table {
   border-collapse: separate;
}
person Bas Slagter    schedule 18.09.2012

arrow_upward
0
arrow_downward

Ни одно из решений, которые я искал, не сработало. Для IE8 цвет фона работал только для строк основной таблицы. Всякий раз, когда я использовал цвет фона для строки заголовка или столбца заголовка, границы исчезали.

Что сработало для меня, так это определение цвета фона для самой таблицы. Нет цвета фона для заголовка. Для каждой строки основной таблицы должен быть определен цвет фона, чтобы перезаписать цвет, определенный в таблице (при необходимости).

person Roger    schedule 10.01.2014