html – 仅在iPad上的桌子的单元格之间非常薄的白色边框

前端之家收集整理的这篇文章主要介绍了html – 仅在iPad上的桌子的单元格之间非常薄的白色边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这仅发生在iPad视网膜和非视网膜iOS 5和6上. @H_301_2@即使我试图在桌子上没有边框,也会出现一个薄的白色边框.

@H_301_2@您可以在http://codepen.io/anon/pen/Kcexq上看到问题的示例.

@H_301_2@需要iPad或模拟器来查看pb.

@H_301_2@仔细查看绿色标签是否有白色边框:

@H_301_2@对于记录,同样的事情发生在显示为表格单元格.

解决方法

出现的细边框似乎是由display:table-row和/或display:table-cell属性引起的. @H_301_2@注意:它实际上不是白色边框,它是一种rgba:(0,alpha);你可以看到,如果你改变桌子后面的背景颜色.

@H_301_2@通过将td样式更改为显示:inline-block;或tr样式来显示:block;,它将摆脱左边和下面的细胞的右边界,但底部边界仍然是立场.

@H_301_2@实际上,用rgba(0,0)覆盖border-color;任何东西(table,tr,td ……)都不会改变任何东西,边界崩溃也不会崩溃; (正如Morpheus所说).
要么计算出的样式没有显示任何计算出的边框,但是,它仍然在这里……

@H_301_2@注意:iOS似乎也会计算边框,具体取决于用户的缩放比例(在真实的iPad上测试).

@H_301_2@以下是Safari iOS的默认表格样式:

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td,th {
    display: table-cell;
    vertical-align: inherit;
}
@H_301_2@我仍在寻找一个可以添加alpha边框的隐藏CSS,如果我找到任何内容,我会更新我的答案.

猜你在找的HTML相关文章