火狐瀏覽器下，td 直接使用position:relative;和background:;產(chǎn)生的邊框

Simon 發(fā)布于2019-04-23 13:31 / 1258人閱讀

摘要：消失示例出現(xiàn)問題問題原因我的理解是各個(gè)瀏覽器之間對(duì)于的解析不同，導(dǎo)致定位時(shí)背景的切割位置不同解決方法在上加上解決方法利用背景切割來決定背景的邊界，從而達(dá)到不覆蓋邊框效果背景被裁剪到內(nèi)邊距框

消失示例：

1 td{
2     width:40px;
3     height:28px;    
4     position:relative;
5     background:#ccc;    
6 }

出現(xiàn)問題

問題原因：

?　　我的理解是各個(gè)瀏覽器之間對(duì)于background-clip:border-box;的解析不同，導(dǎo)致定位時(shí)背景的切割位置不同

解決方法1.0

　　在td上加上z-index:-1;?

解決方法2.0

　　利用背景切割來決定背景的邊界，從而達(dá)到不覆蓋邊框效果

　　td{

　　　　background-clip:padding-box;　　

　　　　position:relative;

　　}

　　background-clip:padding-box;?/*背景被裁剪到內(nèi)邊距框*/

云服務(wù)器 GPU云服務(wù)器 webrtc安卓和火狐瀏覽器互通和Background的區(qū)別可以直接使用的云vps 可以直接使用的云主機(jī)

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

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

相關(guān)文章

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

摘要：解決方法去掉的背景色，把背景色填充在的上，這樣就能完全解決這個(gè)問題，如下在火狐瀏覽器查看效果解決方法給設(shè)置一個(gè)屬性，這樣也能完全解決這個(gè)問題，如下在火狐瀏覽器查看效果擴(kuò)展閱讀一般在開發(fā)管理系統(tǒng)的時(shí)候經(jīng)常會(huì)用到表格，在使用表格式時(shí)通常會(huì)給thead部分的th或td加上背景色然后還有邊框顏色，在這種情況下瀏覽器基本都顯示正常的，但是當(dāng)給th或td加上position: relative時(shí)...

objc94 2019-08-30 15:55 評(píng)論0 收藏0
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ì)開始結(jié)束標(biāo)簽構(gòu)成的，用來包含某一些內(nèi)容子選擇器和后代選擇器的區(qū)別：后代選擇器...

KnewOne 2019-08-28 18:00 評(píng)論0 收藏0
html和css的使用方法以及樣式

摘要：浮動(dòng)的元素脫離文檔流解決方式一給父元素添加超出部分隱藏解決方式二在父元素內(nèi)容最后添加擁有清除浮動(dòng)屬性的元素。布局步驟第一步：清除默認(rèn)樣式第二步：劃分模塊第三步：設(shè)置模塊的大小以及位置第四步：劃分下一級(jí)模塊html和css引入網(wǎng)頁(yè)頭像 <linkrel="shortcuticon"href="img/...ico">css樣式表...

番茄西紅柿 2019-04-23 11:46 評(píng)論0 收藏0
DIV+CSS學(xué)習(xí)筆記總結(jié)篇

摘要：每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格，表示一個(gè)單元格。第一部分 HTML 第一章職業(yè)規(guī)劃和前景職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望：未來IT行業(yè)企業(yè)需求...

iOS122 2019-08-29 11:13 評(píng)論0 收藏0
DIV+CSS學(xué)習(xí)筆記總結(jié)篇

摘要：每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格，表示一個(gè)單元格。第一部分 HTML 第一章職業(yè)規(guī)劃和前景職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望：未來IT行業(yè)企業(yè)需求...

HackerShell 2019-08-01 15:41 評(píng)論0 收藏0