① 前端 PC端兼容性問題總結
1.如果圖片加a標簽在IE9-中會有邊框
2.rgba不支持IE8
3.display:inline-block ie6/7不支持
4.默認的 body 沒有 body 去掉 margin 情況下ie5、6、7邊緣會很寬margin-top加倍 如果處於無聲明狀態那麼所有的ie瀏覽器margin-top加倍
解決方案:用 css 給 body 添加 magin 屬性為0px
5. IE 6.0 Firefox Opera 等是 真實寬度=width+padding+border
IE5.X 真實寬度=width
解決方案:
方法1.
方法2.
6. height 不能小於16px,設置較小高度標簽（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度
7. min-height 不兼容 ie6 7解釋為超過高度就撐開，而其他版本瀏覽器則遮蓋下面的層
8. position:fixed IE5 6無法識別此屬性
9.浮動的div有 margin_left 屬性ie6會加倍 無論兼容視圖還是無聲明視圖
10. cursor 兼容 自定義指針cur格式的圖片url路徑問題無論是兼容還是無聲明版本
11.png圖片 IE6裡面的png圖片不能透明 兼容版本和無聲明版本都是
12.img浮動 img標簽打回車會造成每個圖片之間有縫隙
解決方案:可以刪除之間的回車鍵也可以讓這些圖片浮動
13.在IE瀏覽器下 input type="text" 文本框點擊時後面會出現"X",以及 type="password "後面會出現眼睛,如何除去這兩種默認樣式
14.CSS3前綴 -webkit- webkit渲染引擎 chrome/safari
-moz- gecko渲染引擎 firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎opera
動畫、過渡、 background-size 都需要加前綴
16. PIE.htc 可以實現很多 css3 屬性在IE下的兼容性 如:圓角、陰影、漸變
behavior: url(css/PIE.htc);/ IE邊框陰影 /
}`
背景透明rgba
注: PIE.htc 文件路徑相對是相對於css文件,並非html文件,以上例子是將 PIE.htc 文件放在與css樣式文件同一個文件夾 css 內,而對應的 html 問價與 css 文件夾同級
17.JS實現點擊跳轉到指定位置
② 做前端如何考慮瀏覽器兼容性
IE6/IE7對FE當然很不友好，但專業的FE決不應該因為這兩個瀏覽器難處理就不處理了。假如用戶需要，我的目標是在力所能及的情況下為用戶提供最好的前端展現。兼容性的問題從來都不只是IE6/7的問題，各個手機、瀏覽器、版本的兼容性同樣有各種各樣的問題，比IE奇葩多了。
我的經驗是，每遇到一個坑爹問題，做這么幾件事：
確認觸發場景，什麼瀏覽器、版本、什麼情況下會出現這個問題，做到穩定復現；
找到問題原因，為什麼會出現這樣的問題（網上搜、自己琢磨甚至郵件問相應公司開發者等等都是可行的）；
確定解決辦法，
有沒有什麼框架級的解決辦法，總之是定規范，避免類似問題；
比如不使用某些屬性；
用某種布局方法規避一些問題等等；
有沒有什麼臨時的辦法可以快速繞過去？不是每次都有時間搞框架級的辦法來著。
怎麼hack過去
把這些都積累起來，就會有用處。
不要想著IE6、7沒了就不用考慮瀏覽器兼容性問題，chrome/firefox、 webkit的各種版本，手機的各種瀏覽器、各種終端都要處理更多瀏覽器兼容性問題，恩，對，偶爾還有flash來著。
兼容各種終端、兼容各種解析度、兼容瀏覽器都是兼容性問題，這是FE的命，得認。抱著讓用戶有最好體驗的想法去做，收獲更大。
③ 想問下前端需要考慮的兼容性瀏覽器有哪些
一、瀏覽器的佔有率：
ie6 - 30.23%
ie7 - 4.8%
ie8 - 30.6%
ie9 < 1%
chrome - 13.99%
firefox - 7.17%
safari ~ 5%
其他 ~ 8%
從數據上可以看出chrome + firefox + safari + ie9是高端瀏覽器，ie8勉強算準高端吧。這樣這部分佔有率約57%(如果加上其他webkit內核的瀏覽器會更高一些) 已經大於ie6 + ie7，但是IE6兼容性還是要解決。
二、web前端主要這些兼容瀏覽器：
1，firefox是開源的瀏覽器內核，插件很齊全，是代碼人員的愛寵。
2、IE瀏覽器，要在Windows中開發適合自己的瀏覽器，很多人都在用。
推薦：ie8以上，360安全瀏覽器
3、Google瀏覽器，是谷歌公司開發的網頁瀏覽器，穩定性和安全性很好。
推薦：Google Chrome
4、Opera12.17及更早版本曾經採用的內核是Presto，Opera15及以後的版本採用Blink的內核。用於手機代碼測試也很方便。
推薦：Opera15
④ 現在前端開發還要兼容IE6，IE7嗎
一般都是兼容到IE8，當然這是大多數中小型公司或者非互聯網公司是如此。真正來說，因為IE6版本用戶量仍然很大，所以很多公司都不會放棄對於它甚至會做IE5的兼容。
所以，可能不需要你完美的兼容，但至少保證用戶的使用能夠正常，頁面布局不會錯亂。
⑤ 我是學前端開發的，想問下做前端需要兼容哪些瀏覽器及瀏覽器的版本
目前國內主流瀏覽器：IE、搜狗、360 （可以網路 國內瀏覽器排行 ）
IE要兼容到IE6、7、8，主要是IE6的問題
搜狗和360差不多，主要是那個 極速 模式
⑥ 前端開發常見的兼容性問題及解決方案
解決方法：給input增加樣式
使用這兩個樣式布局的時候
會出現 中間有空白的情況
解決辦法是 給他們的父級設置 font-size:0
1.給父級元素設置
2.給父級樣式設置
示例
3.添加空div
然後給空div設置
請參考筆記 ，奇怪的 && 和 ||
當兩個值都為布爾值的時候 會返回布爾值
但是 兩個都是變數的時候 會返回後面那個變數的值 這是非常奇怪的
去掉蘋果手機默認的按鈕樣式
注意手機阻止默認事件，不可以加到某一個層上面
需要加到全局document上，確實非常的坑爹
另外，使用classList.contains("class") 可以檢查元素是否擁有某樣式
給左邊的圖片設置vertical-align:top
然後使用padding-top的方式去布局就不會左右不對稱了
這種情況是圖片和行高的大小差不多的情況 即 圖片大於文字的大小
如果圖片比文字小就需要使用vertical-align:middle去布局了
internet explorer -- Trident
Mozilla Firefox -- Gecko
opera -- Presto
safari / chrome -- WebKit
⑦ 做前端頁面，什麼時候解決瀏覽器兼容性還有ie瀏覽器兼容性怎麼處理，現在還需要解決ie67 的兼容嗎
你好，做前端開發的話肯定是要解決瀏覽器兼容性還有ie瀏覽器兼容性，如果不解決兼容性，那公司就沒必要專門招前端開發去做這個前端開發頁面了。解決兼容性，也是為了讓前台頁面看起來更加美觀，用戶體驗好。