第一篇部落格,就寫關於瀏覽器的一些相容性問題吧。
說一些題外話,各位能看到這篇部落格的也是緣份~本人大三將成為大四狗,畢業在即,一心都是學好前端找份滿意的工作。雖然接觸前端一年了,但是這過程中斷斷續續地學,也沒找到機會去做專案,儘管基本了解前端開發流程,也學了一些,可是沒有實踐做專案的經驗,還是很虛啊。這段時間重新自學一遍前端,比最初還是思路清晰些。趁此機會,寫寫部落格,記錄一下,也誠心期待著博友們的建議與指點。
這篇部落格完成下來肯定是整合了很多前人的優秀見解,有不足的敬請指出,非常樂意交流~
所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段**有不同的解析,造成頁面顯示效果不統一的情況,瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。
ie是個怪胎,起初不參加w3c標準,導致現在它的相容性問題難以解決(ie絕對是很多程式設計師的痛~好在ie6/7/8份額減少,ie9/10/11的相容性良好,為程式設計師省去很多麻煩)
瀏覽器相容檢測工具:ietest/superview/其他瀏覽器外掛程式。最近發現個比ietest更好用的瀏覽器除錯工具——xenocode browser sandbox(完全免費,**據說這個外掛程式是利用了虛擬機器的方式,達到瀏覽器多版本共存,優點是測試效果跟瀏覽器的效果一樣,並不是模仿出來的,具體怎麼使用大家可以自行搜尋教程。
css常見問題
1.html5標籤相容--可以用js外掛程式解決
2.元素浮動之後
,能設定寬度的話就給元素加寬度
.如果需要寬度是內容撐開
,就給它裡邊的塊元素加上浮動
3.第一塊元素浮動
,第二塊元素加margin值等於第一塊元素
,在ie6下會有間隙問題--浮動元素層級問題
4.ie6下子元素超出父級寬高,會把父級的寬高撐開--盡量不要讓子元素的寬高超過父元素
5.p 包含塊元素巢狀規則--p/td/h1~h6不要再巢狀塊元素標籤
css相容性問題
1.margin相容性問題
margin-top傳遞--觸發bfc(給父元素加overflow:hidden)、haslayout(針對ie6加 zoom:1)
上下margin疊壓--盡量使用同一方向的margin,比如都設定top或者bottom
2.display:inline-block--ie6不支援display:inline-block,解決方案 *display:inline; zoom:1;(zoom:1觸發haslayout)
3.ie6最小高度問題--ie6最小高度19px,解決方案 overflow:hidden
4.ie6雙邊距--當元素浮動後再設定margin後,就會產生雙倍邊距,針對ie6/7新增 *display:inline;
5.li裡子元素都浮動的話,在ie6/7下方會產生4px間隙問題--新增垂直對齊 *vertical-align:top;
6.兩個浮動元素之間有注釋或者內聯元素並且和父級寬度相差不超過3px,導致多出來一點內容--解決方案:兩個浮動元素之間避免出現注釋或者內聯元素;與父級寬度相差3px或以上
7.ie6/7 父級元素的overflow:hidden 是包不住子級的relative--解決方案:針對ie6/7給父級加 *position:relative;
8.ie6下絕對定位元素父級寬高是奇數,絕對定位元素的right和bottom值會有1px的偏差--避免父級寬高出現奇數
9.ie6下絕對定位元素和浮動元素並列絕對定位元素消失--讓絕對定位元素和浮動元素不處在同級
10.ie6下input的空隙--給input元素新增 *float:left;
11.ie6下輸入型別表單控制項背景問題--設定background-attachment:fixed;
關於不同瀏覽器的標籤預設的margin值和padding值不同
通過對css初始化樣式來消除差異,當然,初始化樣式往往會對seo(搜尋引擎優化)有一定的影響,但魚與熊掌不可兼得。
最簡單的初始化方法是*,不過這種方法不建議。
此處貼出馬雲爸爸**的樣式初始化供參考:
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td
body,button,input,select,textarea
h1,h2,h3,h4,h5,h6
address,cite,dfn,em,var
code,kbd,pre,samp
small
ul,ol a
a:hover
supsub
legend
fieldest,img
button,input,select,textarea
table
關於css hack——針對不同的瀏覽器寫不同的css樣式的過程
\9 ——ie10及ie
10以下版本的ie瀏覽器
* ——ie7及ie7以下版本的ie瀏覽器
_——ie6及ie6以下版本的ie瀏覽器
(由於hack不是太標準,建議盡量不要使用)
關於IE瀏覽器相容性的問題
有時候使用其他瀏覽器的時候,需要切換ie的核心 切換方法為 介面 選項下,選擇顯示 切換瀏覽核心按鈕 這樣在瀏覽器搜尋框旁邊會出現切換核心的按鈕 同時關於各大瀏覽器相容性和核心問題,360瀏覽器使用的是ie核心 分為極速模式和相容模式 傲遊瀏覽器可以切換 webkit核心 webkit為瀏覽器核 h...
ie6瀏覽器相容性
塊狀元素設定float 左浮動或有浮動 並且設定margin值之後,第乙個浮動的元素其左側margin值為正常的2倍,如圖,可以看到第乙個元素的左側邊距於其他元素兩兩之間的邊距一致,也就是其左邊距為正常邊距的兩倍 解決方法 給元素設定display inline即讓元素不為塊狀元素,如圖第乙個元素左...
瀏覽器相容性JS問題
常遇到的關於瀏覽器的寬高問題 以下均可console.log 實驗 var winw document.body.clientwidth document.docuemntelement.clientwidth 網頁可見區域寬 var winh document.body.clientheight ...