成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

objc94 / 2184人閱讀

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

一般在開(kāi)發(fā)管理系統(tǒng)的時(shí)候經(jīng)常會(huì)用到表格，在使用表格式時(shí)通常會(huì)給thead部分的th或td加上背景色然后還有邊框顏色，在這種情況下瀏覽器基本都顯示正常的，但是當(dāng)給th或td加上position: relative時(shí)火狐瀏覽器就會(huì)顯示th或td的邊框被遮蓋，只顯示一片背景色沒(méi)有邊框，如下請(qǐng)?jiān)诨鸷鼮g覽器查看，

在火狐瀏覽器查看效果

我為什么要在th或td加上position: relative呢，我在開(kāi)發(fā)系統(tǒng)的時(shí)候使用bootstrap結(jié)合jquery.dataTables，不想使用dataTables自帶的圖標(biāo)主題，使用的bootstrap.dataTable 的主題，主題的圖標(biāo)是通過(guò)偽類(lèi):before和:after實(shí)現(xiàn)的，所以加上的position: relative，其實(shí)這也是主題的一個(gè)小bug，然后導(dǎo)致火狐瀏覽器只會(huì)顯示背景色邊框完全被遮蓋。

解決方法1：

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

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

在火狐瀏覽器查看效果

解決方法2：

給th設(shè)置一個(gè)z-index-1屬性，這樣也能完全解決這個(gè)問(wèn)題，如下

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

在火狐瀏覽器查看效果

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117125.html

相關(guān)文章

  • css學(xué)習(xí)歸納總結(jié)（二）

    摘要：子選擇器只對(duì)直接后代有影響的選擇器，而對(duì)孫子后代以及多層后代不產(chǎn)生作用。爛透了盡可能使用復(fù)合語(yǔ)法糟糕好的避免不必要的重復(fù)糟糕好的組織好的代碼格式代碼的易讀性和易維護(hù)性成正比。 標(biāo)簽與元素 標(biāo)簽和p元素有什么區(qū)別呢？大多數(shù)時(shí)候他們表示的是同一樣?xùn)|西，但仍有細(xì)微的區(qū)別。、等指的是HTML分隔符，而元素則是由一對(duì)開(kāi)始結(jié)束標(biāo)簽構(gòu)成的，用來(lái)包含某一些內(nèi)容 子選擇器和后代選擇器的區(qū)別： 后代選擇器...

    KnewOne 評(píng)論0 收藏0

  • Web前端開(kāi)發(fā)規(guī)范手冊(cè)

    摘要：規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱(chēng)統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線(xiàn)的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)...

    wua_wua2012 評(píng)論0 收藏0

  • Web前端開(kāi)發(fā)規(guī)范手冊(cè)

    摘要：規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱(chēng)統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線(xiàn)的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)...

    Tamic 評(píng)論0 收藏0

  • Web前端開(kāi)發(fā)規(guī)范手冊(cè)

    摘要：規(guī)范目的為提高團(tuán)隊(duì)協(xié)作效率便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱(chēng)統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線(xiàn)的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)...

    xiaotianyi 評(píng)論0 收藏0

  • [總結(jié)]CSS/CSS3常用樣式與web移動(dòng)端資源

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

    The question 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<