一、先說說各種主流瀏覽器的核心
瀏覽器最重要或者說核心的部分是「rendering engine」,可大概譯為「渲染引擎」,不同的瀏覽器核心對網頁編寫的解釋也不同,反映在網頁上的效果也會有所差別。
瀏覽器 ie firefox chrome safari opera
核心 trident
gecko
webkit
webkit
presto
當然,各種瀏覽器核心在不斷更新中,**只能作為乙個簡單參考,像chromium/bink等核心,還有各種瀏覽器核心的具體了解,感興趣的可以上網查查。
因為不同瀏覽器的不同核心,導致了不同的渲染效果,我們在實際開發中,為了達到一致的效果,所以就出現了相容性問題。
二、css hack
css hack 的目的就是使css**相容不同的瀏覽器.
大致有3種表現形式:
css類內部hack比如 ie6能識別下劃線"_"和星號" * ",ie7能識別星號" * ".
選擇器hack:比如 ie6能識別html .class{},ie7能識別+html .class{}或者*:first-child+html .class{}。
html頭部引用(if ie)hack:針對所有ie:條件注釋法等.
書寫順序,一般是將識別能力強的瀏覽器的css寫在後面。
下面是一些常用的css hack方法
1 條件注釋法
例如以上**:
表示如果是ie瀏覽器的話就執行寫在裡面的**,不是的話就不執行。
gt :代表大於;
lt : 代表小於;
gte : greater than or equal
lte : less than or equal
! :選擇條件版本以外的所有版本
例如: 就代表如果是ie7以下的版本。
2 類內屬性字首
在css樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首,以達到預期的頁面展現效果。例如:
複製**
.test
複製**
「-″減號是ie6專有的hack
「\9″ ie6/ie7/ie8/ie9/ie10都生效
「\0″ ie8/ie9/ie10都生效,是ie8/9/10的hack
「\9\0″ 只對ie9/ie10生效,是ie9/10的hack
ie6以下能識別;不能識別 !important;
ff不能識別,但能識別!important;
3 選擇器字首法
當然總結的這些不夠詳細和全面,具體應用還得在實際開發中依據情況而定。
二、css相容性的相關問題
1、padding 與 margin 問題
不同的瀏覽器,對預設的margin和padding解析方式不同
解決方案:
body
2、居中布局
ff,chrome....通過 margin:auto方式完成塊級元素居中顯示
ie6及以下,主要通過 text-align:center;方式完成所有元素的居中(包含塊級)
body
3、元素高度與內容
內容高度超出定義高度後,ie6,自適應,其他瀏覽器,溢位。
解決方案:
overflow屬性;
4、子元素設定上外邊距時對父元素的影響
解決方案:
(1)、父元素 加 border
(2)、設定父元素的padding-top取代子元素的margin-top
三、css3瀏覽器字首
我們在用到css3的一些屬性時,為了達到瀏覽器的相容性,通常會加一些字首,比如:-webkit-, -ms-等等。
這些字首其實是瀏覽器的私有屬性。
//瀏覽器字首:
-webkit-transform: translatex(x) //safari and chrome
-o-transform: translatex(x) //opera
-moz-transform: translatex(x) //firefox
-ms-transform: translatex(x) //ie
CSS Hack瀏覽器相容問題
csshack彙總 1 針對 ie瀏覽器 也就是只在ie下顯示 select 只有ie6 select 只有ie6和ie7 select ie7 和ie8 select ie9以下的所有瀏覽器,這裡select是選擇符,根據情況更換。2 遮蔽ie瀏覽器 也就是ie下不顯示 lang zh selec...
CSS Hack技術解決多瀏覽器相容問題
本文向大家描述一下如何使用css hack技巧解決div css布局多瀏覽器相容問題,針對不同的瀏覽器寫不同的css 的過程,就叫css hack,相信本文介紹一定會讓你有所收穫。css hack技巧彙總 css hack簡介 我們在用div css製作網頁時,由於不同的瀏覽器,比如 interne...
瀏覽器相容問題
我經常看到一些人提問說網頁錯位,和在火狐裡面看上去網頁是好的,在ie在錯位了.在web 下html css裡全看一些關於這些問題.還有有ul li什麼調整不好的.等等 全可以用css hack 解決的.解決方法 用positon relative 然後 top 0px left 0px 上面的top...