火狐瀏覽器table表格th、td填充背景描邊后設置position: relative邊框失效問題

objc94 發布于2019-08-30 15:55 / 2180人閱讀

摘要：解決方法去掉的背景色，把背景色填充在的上，這樣就能完全解決這個問題，如下在火狐瀏覽器查看效果解決方法給設置一個屬性，這樣也能完全解決這個問題，如下在火狐瀏覽器查看效果擴展閱讀

一般在開發管理系統的時候經常會用到表格，在使用表格式時通常會給thead部分的th或td加上背景色然后還有邊框顏色，在這種情況下瀏覽器基本都顯示正常的，但是當給th或td加上position: relative時火狐瀏覽器就會顯示th或td的邊框被遮蓋，只顯示一片背景色沒有邊框，如下請在火狐瀏覽器查看，

在火狐瀏覽器查看效果

我為什么要在th或td加上position: relative呢，我在開發系統的時候使用bootstrap結合jquery.dataTables，不想使用dataTables自帶的圖標主題，使用的bootstrap.dataTable 的主題，主題的圖標是通過偽類:before和:after實現的，所以加上的position: relative，其實這也是主題的一個小bug，然后導致火狐瀏覽器只會顯示背景色邊框完全被遮蓋。

解決方法1：

去掉th的背景色，把背景色填充在thend 的 tr上，這樣就能完全解決這個問題，如下

.table{
    thead{
        tr{
            background-color: #4587E7;
        }
        th{
            position: relative;
            color: #fff;
        }
    }
}

在火狐瀏覽器查看效果

解決方法2：

給th設置一個z-index-1屬性，這樣也能完全解決這個問題，如下

.table{
    thead{
        th{
            position: relative;
            z-index: -1;
            color: #fff;
            background-color: #4587e7;
        }
    }
}

在火狐瀏覽器查看效果

擴展閱讀：http://www.w3help.org/zh-cn/c...

GPU云服務器云服務器 table td問題 th td html html td填充 html 邊框填充

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117125.html

css學習歸納總結（二）

摘要：子選擇器只對直接后代有影響的選擇器，而對孫子后代以及多層后代不產生作用。爛透了盡可能使用復合語法糟糕好的避免不必要的重復糟糕好的組織好的代碼格式代碼的易讀性和易維護性成正比。標簽與元素標簽和p元素有什么區別呢？大多數時候他們表示的是同一樣東西，但仍有細微的區別。、等指的是HTML分隔符，而元素則是由一對開始結束標簽構成的，用來包含某一些內容子選擇器和后代選擇器的區別：后代選擇器...

KnewOne 2019-08-28 18:00 評論0 收藏0
Web前端開發規范手冊

摘要：規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。規范目的為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。文件規范文件命名規則文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

wua_wua2012 2019-08-22 16:13 評論0 收藏0
Web前端開發規范手冊

摘要：規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。規范目的為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。文件規范文件命名規則文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

Tamic 2019-08-02 10:09 評論0 收藏0
Web前端開發規范手冊

摘要：規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。規范目的為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。文件規范文件命名規則文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

xiaotianyi 2019-08-30 15:53 評論0 收藏0
[總結]CSS/CSS3常用樣式與web移動端資源

摘要：不允許負值用百分比來定義縮放比例。解決這個很簡單，在父元素中使用即可解決該。列寬度由單元格內容設定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點點。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼：第一段文字選中效果第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 評論0 收藏0