（CSS）不同浏览器对table中visibility属性显示的不同

Lsnsh 发布于2019-08-30 13:04 / 1605人阅读

摘要：本文举例说明在不同浏览器对中属性显示的不同。一代码二不同浏览器的表示选取了分别测试，下文所有图片从左至右顺序均如前所述。若使不同浏览器显示相同结果，可对或设置。我并没有找到产生上述结果的原因，只能认为是不同浏览器处理结果的不同。

本文举例说明在不同浏览器对table中visibility属性显示的不同。

一、HTML代码

th	th
td	td

二、不同浏览器的表示

选取了Chrome、FireFox、Edge、IE11分别测试，下文所有图片从左至右顺序均如前所述。

2.1 在border-collapse: collapse;情况下，隐藏thead元素

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
thead {
  visibility: hidden;
}

显示结果如下图：

可以看出，Chrome把边框隐藏了，但另外三者只隐藏了内容，未隐藏边框。

2.2 无border-collapse属性，隐藏thead元素

th, td {
  border: 1px solid black;
}
thead {
  visibility: hidden;
}

四者显示结果相同，如下图：

2.3 在border-collapse: collapse;情况下，隐藏th元素

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
th {
  visibility: hidden;
}

四者显示结果与2.1节相同，如下图：

2.4 无border-collapse属性，隐藏th元素

th, td {
  border: 1px solid black;
}
th {
  visibility: hidden;
}

四者显示与2.2节相同，如下图：

2.5 在border-collapse: collapse;情况下，隐藏tr元素

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
tr {
  visibility: hidden;
}

显示结果如下图：

可以看出，Chrome与FrieFox将整个表格隐藏，而Edge与IE11未将边框隐藏。

2.6 无border-collapse属性，隐藏tr

th, td {
  border: 1px solid black;
}
tr {
  visibility: hidden;
}

四者显示结果相同，均将表格全部隐藏

三、结论

在border-collapse: collapse;情况下，隐藏thead或th，Chrome可将thead部分全部隐藏，而FireFox、Edge与IE11只隐藏了thead部分的文本内容，未隐藏边框。

无border-collapse属性时，隐藏thead或th，四个浏览器均可以将thead部分全部隐藏。

上述两个结果也适用于tbody相关元素。

在border-collapse: collapse;情况下，隐藏tr，Chrome与FireFox可将表格全部隐藏，而Edge与IE11只隐藏了表格的文本内容，未隐藏边框。

无border-collapse属性时，隐藏tr，四个浏览器均可以将表格全部隐藏。

若使不同浏览器显示相同结果，可对th或td设置border: none;。

我并没有找到产生上述结果的原因，只能认为是不同浏览器处理结果的不同。W3school上说若不规定!DOCTYPE，border-collaspe可能产生意想不到的结果，上述测试均有规定!DOCTYPE。

云服务器 GPU云服务器显示不同效果不同浏览器浏览器对和css3的支持 webrtc不同浏览器不相容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115282.html

CSS

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。双冒号是在当前规范中引入的，用于区分伪类和伪元素。 1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？有两种， IE 盒子模型、W3C 盒子模型；盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；区别： IE的cont...

Lyux 2019-08-29 16:16 评论0 收藏0
知识整理之CSS篇

摘要：如对知识点感兴趣，可移步至知识整理之篇就是针对不同的浏览器或不同版本浏览器写特定的样式达到让浏览器兼容的过程。对于伪元素的定义伪元素在中创建了一些抽象元素，这些对象不存在与常文档流中。隐藏元素的几种方法该属性隐藏元素，单元素在文档流中仍占据 CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至...

ermaoL 2019-08-30 15:55 评论0 收藏0
css基础知识整理篇

摘要：折叠后的计算参与折叠的都是正值在都是正数的情况下，取其中较大的值为最终值。参与折叠的中有正值，有负值有正有负，先取出负中绝对值中最大的，然后，和正值中最大的相加。单冒号用于伪类，双冒号用于伪元素。转自某个大神整理的面试题盒子模型标准盒子模型内容（content）+ 填充（padding）+ 边界（margin）+ 边框（border）; 低版本IE盒子模型 content部分把...

QiShare 2019-08-29 11:24 评论0 收藏0
前端常见知识点汇总（面试）-HTML和CSS部分

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 评论0 收藏0
前端常见知识点汇总（面试）-HTML和CSS部分

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

wuyangnju 2019-08-02 13:58 评论0 收藏0