gpt4 book ai didi

javascript - 如何修复 IE11 中表格单元格之间的白线错误

转载 作者:太空宇宙 更新时间:2023-11-04 02:08:17 25 4
gpt4 key购买 nike

我需要制作一个漂亮的表格,它可以具有多种属性:宽度、高度、边框。

宽度和高度调整到外部容器,其他属性应用于表格。

它在除 IE 11 之外的所有当前浏览器中都可以正常工作。我已经实现了两个选项,就是tablebased on div ,错误在这两种情况下都存在。

它看起来如何

html:

<div class="table">
<div class="row">
<div class="cell"></div>
...
</div>
...
</div>

CSS:

.table {
display: table;
width: 100%;
height: 100%;
}

.table .row {
display: table-row;
}

.table .cell {
display: table-cell;
text-align: center;
overflow: hidden;
vertical-align: middle;
}

.row.body:nth-child(odd) .cell {
background-color:rgb(156,156,156);
}

.row.body:nth-child(even) .cell {
background-color:rgb(255,255,255);
}

.row:last-of-type .cell:last-of-type {
border-bottom-right-radius:16px;
}

.row:last-of-type .cell:first-of-type {
border-bottom-left-radius:6px;
}

.row .cell:last-of-type{
border-right:3px solid rgb(100,0,0);
}

结果:

white lines in IE

如何摆脱或避免这种情况?

为什么不适合手工计算的宽度?因为表格在可调整大小的容器中,宽度应该动态计算。查看完整示例...

目前我无法揭示相关系数,我认为这可以使用 JavaScript 动态计算。

jsfiddle 上的完整示例

最佳答案

这是一个 IE 错误,在使用以下 CSS 样式时会发生:

  • border-radius
  • border-bottom-left-radius
  • border-bottom-left-radius
  • border-top-left-radius
  • border-top-right-radius

作为解决方法,尝试通过添加以下元标记来在浏览器上打开 IE10 模式 <meta http-equiv="X-UA-Compatible" content="IE=10" />到您的页面,或尝试使用以下页面声明禁用怪癖模式 <!DOCTYPE html>

Source

关于javascript - 如何修复 IE11 中表格单元格之间的白线错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40264722/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com