資訊專欄INFORMATION COLUMN
摘要：本文舉例說明在不同瀏覽器對中屬性顯示的不同。一代碼二不同瀏覽器的表示選取了分別測試，下文所有圖片從左至右順序均如前所述。若使不同瀏覽器顯示相同結(jié)果，可對或設置。我并沒有找到產(chǎn)生上述結(jié)果的原因，只能認為是不同瀏覽器處理結(jié)果的不同。
一、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;
}
顯示結(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將整個表格隱藏，而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屬性時，隱藏thead或th，四個瀏覽器均可以將thead部分全部隱藏。
上述兩個結(jié)果也適用于tbody相關(guān)元素。
在border-collapse: collapse;情況下，隱藏tr，Chrome與FireFox可將表格全部隱藏，而Edge與IE11只隱藏了表格的文本內(nèi)容，未隱藏邊框。
無border-collapse屬性時，隱藏tr，四個瀏覽器均可以將表格全部隱藏。
若使不同瀏覽器顯示相同結(jié)果，可對th或td設置border: none;。
我并沒有找到產(chǎn)生上述結(jié)果的原因，只能認為是不同瀏覽器處理結(jié)果的不同。W3school上說若不規(guī)定!DOCTYPE，border-collaspe可能產(chǎn)生意想不到的結(jié)果，上述測試均有規(guī)定!DOCTYPE。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115282.html
摘要：折疊后的計算參與折疊的都是正值在都是正數(shù)的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負值有正有負，先取出負中絕對值中最大的，然后，和正值中最大的相加。單冒號用于偽類，雙冒號用于偽元素。 轉(zhuǎn)自某個大神整理的面試題 盒子模型 標準盒子模型 內(nèi)容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）; 低版本IE盒子模型 content部分把...
摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。 一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...
摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。 一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...
閱讀 1692·2019-08-30 13:04
閱讀 2244·2019-08-30 12:59
閱讀 1811·2019-08-29 18:34
閱讀 1919·2019-08-29 17:31
閱讀 1301·2019-08-29 15:42
閱讀 3594·2019-08-29 15:37
閱讀 2918·2019-08-29 13:45
閱讀 2813·2019-08-26 13:57
