Question

我的表在IE8中引起了问题。我无法将表格标题中的分割边框显示在渐变上方（除了在一个点中，您可以在下图中看到）。边框在其他所有浏览器中都很好，甚至在IE8兼容模式下也是如此。有想法该怎么解决这个吗？ Here是一个测试网站，供所有人查看已应用的代码。

Comparison of table header borders in IE8 and IE8 Compatibility Mode

这是表头的CSS，但您可以查看整个CSS文件here：

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

Answer 1

我试过解决你的问题，但不能。我看到这发生在IE8和IE9 doc和浏览器模式中。但不是在IE 7中。但是当只使用

时

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

边界在IE9中工作......只留下IE 8来解决。您可以使用IE7和IE9特定的条件注释来使用上面的代码（对于IE9）和

filter: progid:DXImageTransform.Microsoft

对于IE7。关于IE8中的问题，这里有一个类似的帖子：

Table cell loses border when css gradient filter is applied in IE8

Answer 2

我发现了一个修复程序，但我对它不满意，因为它不再是有效的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]-->

我向老板展示了这个，他没有批准，所以我仍在寻找解决方案!!!

Answer 3

将此添加到我的CSS是我的解决方案：

table {
   border-collapse: separate;
}

Answer 4

我搜索过的解决方案都没有奏效。对于IE8，背景颜色仅适用于正文表行。每当我使用标题行或标题列的背景颜色时，边框就会消失。

对我来说有用的是为表格本身定义背景颜色。标题没有背景颜色。每个正文表行都需要定义背景颜色以覆盖表格中定义的颜色（如果需要）。

表头边框在IE8中以渐变背景消失

4 个答案: