寫作目的:記錄下這個籠統的瀏覽器相容性問題。讓自己更清晰一些。
瀏覽器相容性問題出現的原因就是瀏覽器核心不同所造成的,那麼回顧一下常用瀏覽器的核心:
切入正題
1.我一般先寫乙個reset.css
2.img標籤一行多個排列時,右側和下方有預設空隙。div,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dd,dt //每個瀏覽器對內外補丁大小解析不同
ul,ol,li
a
解決方法:給img標籤新增屬性:
ps:float
:left;
溢位隱藏,解決所有瀏覽器此問題。overflow
:hidden;
3.透明度問題
ie中的寫法:
普通瀏覽器filter
:alpha(opacity=60);
4.不同的瀏覽器對input框解析不同,為了統一我們可以這麼做:opacity
:0.6;
直接上demo:
(正常來講,如果沒有明確設定height的值,那麼設定的line-height值就是height的值。在ie8中的input要設定高度。input,img,iframe等元素不支援偽元素 ,因為他們不是容器。)html部分:
"cont">
"wrap">
"ensure" type="button" value="確定" />
css部分:
.cont
.wrap
.ensure
ps:表單元素對齊方法:新增float屬性。
5.解決高度塌陷以及清除浮動。簡單的demo:
不過通常為了省事,大家也都會用萬能清除法來解決這個問題(建議寫在公共類裡面,當然也是為了省事)html部分:
"cont">
"one">
"one">
"two">
css部分:
.cont
.one
.two
6.360雙核瀏覽器,據說新增以下頭部meta資訊可以使得網頁用webkit核心渲染:.clearfix
:after
.clearfix //zoom(ie專有屬性)可解決ie6,ie7浮動問題,ie8以及以上瀏覽器才能識別偽類元素。
content="webkit">一些相容性寫法,為了ie和普通瀏覽器通用
慢慢積累~~~css:
cursor:pointer; //滑鼠手勢
border:
0; //去除外邊框
js:統一使用 獲取集合類物件。
統一通過 getattribute() 獲取自定義屬性。
ie || 其他
window.event || event
e.canclebubble || e.stoppropagation //阻止事件冒泡
瀏覽器相容性
瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...
瀏覽器相容性
所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...
瀏覽器相容性
trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...