資訊專欄INFORMATION COLUMN
摘要：本文舉例說明在不同瀏覽器對(duì)中屬性顯示的不同。一代碼二不同瀏覽器的表示選取了分別測試，下文所有圖片從左至右順序均如前所述。若使不同瀏覽器顯示相同結(jié)果，可對(duì)或設(shè)置。我并沒有找到產(chǎn)生上述結(jié)果的原因，只能認(rèn)為是不同瀏覽器處理結(jié)果的不同。
一、HTML代碼本文舉例說明在不同瀏覽器對(duì)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;
}
顯示結(jié)果如下圖：
可以看出，Chrome把邊框隱藏了，但另外三者只隱藏了內(nèi)容，未隱藏邊框。
2.2 無border-collapse屬性，隱藏thead元素th, td {
border: 1px solid black;
}
thead {
visibility: hidden;
}
四者顯示結(jié)果相同，如下圖：
2.3 在border-collapse: collapse;情況下，隱藏th元素table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th {
visibility: hidden;
}
四者顯示結(jié)果與2.1節(jié)相同，如下圖：
2.4 無border-collapse屬性，隱藏th元素th, td {
border: 1px solid black;
}
th {
visibility: hidden;
}
四者顯示與2.2節(jié)相同，如下圖：
2.5 在border-collapse: collapse;情況下，隱藏tr元素table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
tr {
visibility: hidden;
}
顯示結(jié)果如下圖：
可以看出，Chrome與FrieFox將整個(gè)表格隱藏，而Edge與IE11未將邊框隱藏。
2.6 無border-collapse屬性，隱藏trth, td {
border: 1px solid black;
}
tr {
visibility: hidden;
}
四者顯示結(jié)果相同，均將表格全部隱藏
三、結(jié)論在border-collapse: collapse;情況下，隱藏thead或th，Chrome可將thead部分全部隱藏，而FireFox、Edge與IE11只隱藏了thead部分的文本內(nèi)容，未隱藏邊框。
無border-collapse屬性時(shí)，隱藏thead或th，四個(gè)瀏覽器均可以將thead部分全部隱藏。
上述兩個(gè)結(jié)果也適用于tbody相關(guān)元素。
在border-collapse: collapse;情況下，隱藏tr，Chrome與FireFox可將表格全部隱藏，而Edge與IE11只隱藏了表格的文本內(nèi)容，未隱藏邊框。
無border-collapse屬性時(shí)，隱藏tr，四個(gè)瀏覽器均可以將表格全部隱藏。
若使不同瀏覽器顯示相同結(jié)果，可對(duì)th或td設(shè)置border: none;。
我并沒有找到產(chǎn)生上述結(jié)果的原因，只能認(rèn)為是不同瀏覽器處理結(jié)果的不同。W3school上說若不規(guī)定!DOCTYPE，border-collaspe可能產(chǎn)生意想不到的結(jié)果，上述測試均有規(guī)定!DOCTYPE。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115282.html
摘要：如對(duì)知識(shí)點(diǎn)感興趣，可移步至知識(shí)整理之篇就是針對(duì)不同的瀏覽器或不同版本瀏覽器寫特定的樣式達(dá)到讓瀏覽器兼容的過程。對(duì)于偽元素的定義偽元素在中創(chuàng)建了一些抽象元素，這些對(duì)象不存在與常文檔流中。隱藏元素的幾種方法該屬性隱藏元素，單元素在文檔流中仍占據(jù) CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻布局、高頻知識(shí)點(diǎn)、性能優(yōu)化等方面進(jìn)行歸納。如對(duì)HTML知識(shí)點(diǎn)感興趣，可移步至...
摘要：折疊后的計(jì)算參與折疊的都是正值在都是正數(shù)的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負(fù)值有正有負(fù)，先取出負(fù)中絕對(duì)值中最大的，然后，和正值中最大的相加。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素。 轉(zhuǎn)自某個(gè)大神整理的面試題 盒子模型 標(biāo)準(zhǔn)盒子模型 內(nèi)容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）; 低版本IE盒子模型 content部分把...
摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對(duì)定位，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位，元素脫離文檔流。 一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設(shè)置寬高（即，即使設(shè)置了也不管用，例如a標(biāo)簽）、margin和padding的top和bottom 塊元素，獨(dú)占一行；可以設(shè)置寬高、margin、padding3、可以使用displa...
摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對(duì)定位，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位，元素脫離文檔流。 一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設(shè)置寬高（即，即使設(shè)置了也不管用，例如a標(biāo)簽）、margin和padding的top和bottom 塊元素，獨(dú)占一行；可以設(shè)置寬高、margin、padding3、可以使用displa...
閱讀 1705·2019-08-30 13:04
閱讀 2259·2019-08-30 12:59
閱讀 1821·2019-08-29 18:34
閱讀 1929·2019-08-29 17:31
閱讀 1319·2019-08-29 15:42
閱讀 3633·2019-08-29 15:37
閱讀 2932·2019-08-29 13:45
閱讀 2823·2019-08-26 13:57
