（CSS）不同瀏覽器對table中visibility屬性顯示的不同

Lsnsh 發布于2019-08-30 13:04 / 1653人閱讀

摘要：本文舉例說明在不同瀏覽器對中屬性顯示的不同。一代碼二不同瀏覽器的表示選取了分別測試，下文所有圖片從左至右順序均如前所述。若使不同瀏覽器顯示相同結果，可對或設置。我并沒有找到產生上述結果的原因，只能認為是不同瀏覽器處理結果的不同。

本文舉例說明在不同瀏覽器對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不同瀏覽器不相容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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