關於 CSS Hack ,目前瀏覽器兼容性的若干問題


本文不考慮兼容 IE6

我是名前端實習生,剛上班沒多久就遇到了一個很趕的項目,要求我為大量的頁面做CSS兼容,以前我自學的時候,折騰過 CSS Hack,沒想到業務中的情況更加復雜。因為工作量有點大, 而公司只有我一個前端...我怕我之前學到的皮毛不夠規范、不夠清晰,會帶來潛在的問題,所以匆忙整理筆記的時候,發現現在網上很多CSS Hack大全之類的教程都有點舊,普遍在 IE9 之后的時間都沒有更新了,所以今天來請教一下。

首先我之前學習的時候,我是把瀏覽器兼容分為 Firefox 標准、Chrome 標准 和 IE7 標准,一般情況下我會寫一個適合 IE7 (或者說絕大部分 IE 版本)的 CSS( .name{}),然后再根據 Firefox ( @-moz-document url-prefix(){.name{}})或者 Chrome ( @media screen and (-webkit-min-device-pixel-ratio:0){.name{}})去調整

所以 1、請問按照普遍網民的瀏覽器使用情況,我這樣的分配兼容方案和CSS Hack寫法合理不?如果不合理的話,應該怎么規范地分配和編寫?

還有今天發現,同一個網頁有個 ul 的長度,我在我的 Windows10 + IE11中是設置了寬度為 215px ,但是在經理的 Windows7 + IE11 中卻短了足足 20px ,我的 IE 版本是11.192,更新版本為11.0.29,而經理的 IE 版本是 11.0 更新版本為11.0.29,難道 IE11 也有很多個版本? 2、遇到這種情況該如何處理?

謝謝指教!

8 个解决方案

#1


1. 實踐出真知,你只有模擬不同的環境,看看能否達到這樣的效果

2. 真沒碰到過這樣的情況,不過,你可以看看你經理的瀏覽器有沒有放大或縮小,我曾經就碰到過類似情況,字體變大了,但表格寬度不變,結果導致標題換行,想半天沒想出原因,后來一看,瀏覽器被放大到110%,恢復后一切正常

#2


引用 1 樓 jjkk168 的回復:
1. 實踐出真知,你只有模擬不同的環境,看看能否達到這樣的效果

2. 真沒碰到過這樣的情況,不過,你可以看看你經理的瀏覽器有沒有放大或縮小,我曾經就碰到過類似情況,字體變大了,但表格寬度不變,結果導致標題換行,想半天沒想出原因,后來一看,瀏覽器被放大到110%,恢復后一切正常



我想問一下用什么東西可以模擬各種瀏覽器的環境呢,逐個逐個去下載真的好苦

第二個我發現了,是之前下的人打多了一個 li,然后在我的 IE11里這個 li 不占位,經理的 IE 里居然占了點位,撐高了整個 ul ,所以長了20px

#3


找一個 CSS Reset, 一般情況下,不用比較新的CSS屬性的話,不需要自己寫Hack。要么用CSS框架看看。

#4


想問一下用什么東西可以模擬各種瀏覽器的環境呢

#5


引用 4 樓 u012736963 的回復:
想問一下用什么東西可以模擬各種瀏覽器的環境呢


首先是安裝幾個瀏覽器,然后幾個常用的瀏覽器基本都有F12工具,如IE、Chrome、Firefox和Safari等。並且這些瀏覽器還能模擬不同的版本,你可以找找看

#6


用  IE texter  去調試  這樣就會知道每個瀏覽器的不同

#7


引用 6 樓 qq_34555974 的回復:
用  IE texter  去調試  這樣就會知道每個瀏覽器的不同


這個問題能幫一下嗎,我現在就是想重寫一下那個事件
【http://bbs.csdn.net/topics/391930703?page=1#post-401040430】

#8


兼容性問題應當分下輕重緩急,列出最重要的來。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com