摘要:本文举例说明在不同浏览器对中属性显示的不同。一代码二不同浏览器的表示选取了分别测试,下文所有图片从左至右顺序均如前所述。若使不同浏览器显示相同结果,可对或设置。我并没有找到产生上述结果的原因,只能认为是不同浏览器处理结果的不同。
一、HTML代码本文举例说明在不同浏览器对table中visibility属性显示的不同。
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属性,隐藏trth, 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。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115282.html
摘要:折叠后的计算参与折叠的都是正值在都是正数的情况下,取其中较大的值为最终值。参与折叠的中有正值,有负值有正有负,先取出负中绝对值中最大的,然后,和正值中最大的相加。单冒号用于伪类,双冒号用于伪元素。 转自某个大神整理的面试题 盒子模型 标准盒子模型 内容(content)+ 填充(padding)+ 边界(margin)+ 边框(border); 低版本IE盒子模型 content部分把...
摘要:一内联元素与行元素的区别内联元素即行内元素。绝对定位,相对于定位以外的第一个父元素进行定位,元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素,在文档流中挤在一行;不能设置宽高(即,即使设置了也不管用,例如a标签)、margin和padding的top和bottom 块元素,独占一行;可以设置宽高、margin、padding3、可以使用displa...
摘要:一内联元素与行元素的区别内联元素即行内元素。绝对定位,相对于定位以外的第一个父元素进行定位,元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素,在文档流中挤在一行;不能设置宽高(即,即使设置了也不管用,例如a标签)、margin和padding的top和bottom 块元素,独占一行;可以设置宽高、margin、padding3、可以使用displa...
阅读 1628·2019-08-30 13:04
阅读 2165·2019-08-30 12:59
阅读 1751·2019-08-29 18:34
阅读 1836·2019-08-29 17:31
阅读 1228·2019-08-29 15:42
阅读 3506·2019-08-29 15:37
阅读 2835·2019-08-29 13:45
阅读 2751·2019-08-26 13:57