瀏覽器相容性 iframe框架 還有邊距塌陷問題

2021-10-17 23:11:38 字數 1762 閱讀 4477

瀏覽器相容性

1.頁面會預設給所有標籤儲存空隙,解決方法

*2.塊級元素水平居中

div3.給文字和設定水平居中

div4.塊級元素水平垂直居中

.box

5.清除浮動的方法:

1.div

2.div:after

6.定位保證不序列

相對定位,巢狀絕對定位,除非此元素要參照瀏覽器

7.偽類事件的寫作順序

hover必須在link之後,active必須在hover之後

8.不要刪除,否則會變成ie低版本模式

9.如果要相容ie8以下瀏覽器,不要寫html5和css3

10.如果高版本瀏覽器要設定css3屬性相容,要加瀏覽器字首

列如:-webkit-flex:1;

11.div巢狀img,會在底部有空隙,解決方法

img12.去掉多張同行的空隙

img13.諜影重重:當浮動元素中間出現空文字,空標籤或者注釋,會佔空格面積,造成元素序列,

解決方法:

1.注釋不新增到標籤中間

2.把寬度值相應變小

3.不設定浮動,列如:定位,流動布局,轉化**法

14.邊距塌陷:產生在巢狀元素中,垂直方向上邊距會出現合併現象,解決:

1.給父類標籤新增內邊距

2.給父類新增border

3.給父類新增overflow:hideen

ie低版本瀏覽器相容性

相容性選擇符

新增在屬性上的

_width 讓屬性相容ie6以下

*width讓屬性相容ie7以下

>width讓屬性相容ie7以下

新增在屬性值上的

width:400px/0;讓屬性相容ie8以上

width:400px/9;讓屬性相容ie5以上

新增在選擇器上的

*body .box{}相容ie7以下

*+body .box{}相容ie7以上

語法與規則

提高屬性優先順序

background-color:silver!important;相容ie7以上

注意:必須寫在重複屬性之前

標籤的選擇條件

< !–[if ie 7]>

< h1>看看文字什麼時候顯示< /h1>

< ![endif]–>

比較運算子

lt小於 lte小於等於 gt大於 gte大於等於 !不等於

< !–[if gte ie 8]>

< h1>看看文字什麼時候顯示< /h1>

< ![ endif]–>

多條件判斷

&並且 |或者

< !–[if (gte ie 7)&(lte ie 8)]>

< h1>看看文字什麼時候顯示< /h1>

< ![endif]–>

iframe框架

< iframe src=""width=「100%」 height=「400px」

frameborder=「0」 scrolling=「no」 marginwidth=「300px」 marginheight=「300px」>< /iframe>

width寬度 height 高度 src路徑 frameborder 邊框 scrolling是否顯示滾動條

marginwidth 框架裡面頁面的左邊距 marginheight框架裡面頁面的上邊距

box-sizing設定或檢索物件的盒模型組成模式

content-box顯示成填充+邊框+邊距 border-box顯示成填充+邊框

瀏覽器相容性

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

瀏覽器相容性

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

瀏覽器相容性

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