web前端面試題之 CSS瀏覽器相容性?

2021-08-09 04:02:46 字數 1273 閱讀 8599

css瀏覽器相容性?

答題技巧:因為這個問題主要是看你經驗,一般有了開發經驗的都會遇到這樣的坑,你只要說出幾個來大致就可以了。

1.對齊文字和文字輸入框

問題:當input元素在設定了高時,在ie7、ie8、ie9下會出現文字和文字輸入框不能對齊的現象,其他正常,包括opera

解決:vertical-align:middle;

2.容器寬度在瀏覽器中解釋不同

問題:不同瀏覽器下寬度不同,比如說設定width:200px,在ie7、ie8、ie9下顯示的是200px,在ff、chrome、opera中顯示的是220px

解決:用width:200px; *width:220px,其中ie7、ie8、ie9會識別兩個寬度,以後者為準,故寬度為220px,在ff、chrome、opera中,識別第乙個寬度,解析

3. div居中問題

問題:ie7、ie8、ie9在設定了margin-left和margin-right為auto後,並不能使div居中顯示,其他行

解決:設定body居中,定義text-algin: center

4.字型大小問題

問題:對字型大小small的定義不同,在firefox和chrome中為small,而ie7、ie8、ie9中為16px,差別挺大

解決:明確說明字型的大小,例如16px

5.td高度的問題 (這裡有興趣的同學可以研究一下。知道了這個問題,還在研究當中)

問題:在ie9、ie10、ff、chrome中table中td的高度不包含border的寬度,但是ie7和ie8中td的高度包含了border的高度,設定line-height和height一樣。

解決:6.如何對其文字和文字輸入框的內容()

問題:當input元素在設定了高和設定了text-align:center時,在ie7、ie8、ie9下會出現文字和文字輸入框內容不能對齊的現象,其他正常,包括opera

解決:在樣式中設定line-height:100px

7.css hack的方法

所有瀏覽器 通用 height: 100px;

ie6 專用 _height: 100px;

ie7 專用 *+height: 100px;

ie6、ie7 共用 *height: 100px;

ie7、ff 共用 height: 100px !important;

**的順序一定不能顛倒了,要不又前功盡棄了。因為瀏覽器在解釋程式的時候,如果重名的話,會用後面的覆蓋前面的,就象給變數賦值乙個道理,所以我們把通用的放前面,越專用的越放後面

2019前端面試系列 HTTP 瀏覽器面試題

特性 cookie localstorage sessionstorage indexeddb 資料生命週期 一般由伺服器生成,可以設定過期時間 除非被清理,否則一直存在 頁面關閉就清理 除非被清理,否則一直存在 資料儲存大小 4k5m 5m無限 與服務端通訊 每次都會攜帶在 header,中,對於...

前端面試題 css

1.實現不使用border畫出1px高的線,在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果 2.介紹一下標準的css盒子模型,低版本的ie盒子模型有什麼不同 3.box sizing屬性 用來控制元素的盒子模型的解析模式。預設為content box 4.css選擇器有哪些?哪些屬性可以繼承?...

前端面試題 css

1.什麼是盒模型?盒模型主要分為w3c盒模型和ie盒模型,盒模型主要包括content,padding,border,margin。其中w3c盒模型的width content,ie盒模型的width content padding border。2.flex flex為彈性布局,webkit核心的...