瀏覽器相容性 td在相對定位下邊框不可見

2022-09-19 07:33:15 字數 963 閱讀 2147

相容性問題:

**中單元格td在設定position:relative的同時設定了背景顏色的情況下:在ie和ff下,td的邊框會不可見。

原因:

背景也有邊界,在ie和ff下,td的背景範圍包括邊框在內,把邊框覆蓋掉了。

解決方案:

1.在td內增加乙個div盒子包含所有內容,在div內設定相對定位(position:relative)

2.在td設定相對定位的同時,設定background-clip:padding-box;

注意:

background-clip是css3的屬性,只有ie9+、firefox、opera、chrome 以及 safari 支援該屬性,所以如果要相容ie9以下瀏覽器的話,這種方法就不合適了。

background-clip: border-box   /*背景被裁剪到邊框盒*/

background-clip: padding-box  /*背景被裁剪到內邊距框*/

background-clip: content-box  /*背景被裁剪到內容框*/

background-clip: inherit     /*是否整合父元素屬性*/

background-clip: text           /* 僅chrome支援,所以一般使用-webkit-background-clip: text;表示以區塊內的文字作為裁剪區域向外裁剪,文字的背景即為區塊的背景,文字之外的區域都將被裁剪掉*/

這個屬性用起來還蠻有意思的,感興趣的可以自己查閱一下。

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...

瀏覽器相容性

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

瀏覽器相容性

trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...