ie7瀏覽器兼容問題

本文轉載自查看原文 2016-11-19 11:50 1096 CSS/ ie兼容問題/ ie測試/ ie調試

win10 下如何調試Ie

網上有很多ie的測試工具，包括ms自己出的有，但是如果是win10系統，壓根不需要這些玩意。

win10 瀏覽器edge雖然是重寫過的,但是win10並沒有完全拋棄ie，可能是為了照顧xxx人習慣ie,打開之后,按F12打開開發工具，

這樣就可以用各個版本調試了。

Ie注意事項

html5shiv：解決ie9以下瀏覽器對html5新增標簽的不識別，並導致CSS不起作用的問題。

respond.min：讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。

letskillie6.zh_CN.pack.js：IE6時代已經成為歷史,尤其是許多IE6的老標准成為現在開發的詬病.給使用IE6的老用戶發出一個提醒。

1  <!--[if lt IE 9]>
2     <script src="@ViewHelper.Content("/content/js/html5shiv.js")"></script>
3     <script src="@ViewHelper.Content("/content/js/respond.min.js")"></script>
4     <![endif]-->
5     <!--[if lt IE 6]>
6     <script src="@ViewHelper.Content("/content/js/letskillie6.zh_CN.pack.js")"></script>
7     <![endif]-->

View Code

當然可以直接使用bootcdn，http://www.bootcdn.cn/

Ie常見兼容

1、ie7 、8 不支持hover

解決思路：使用js來控制

2、ie的層級定位蔗照問題

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         .div1 {height: 80px;border: 1px solid red;position: relative;}
 8         .div11 {width: 200px;height: 60px;position: absolute;left: 50px;top: 50px;background: orange;}
 9         .div2 {margin-top: 10px;height: 80px;border: 1px solid blue;position: relative; background-color: red}
10 
11     </style>
12 </head>
13 <body>
14 <div class="div1">
15     <div class="div11"></div>
16 </div>
17 <div class="div2">
18 
19 </div>
20 </body>
21 </html>

View Code

如上代碼的結果：

如圖有部分被父容器的兄弟元素覆蓋；

解決思路：父容器與父容器的兄弟元素設置z-index，且父容器z-index大於父容器的兄弟元素；

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         .div1 {height: 80px;border: 1px solid red;position: relative;
 8             z-index: 99;}
 9         .div11 {width: 200px;height: 60px;position: absolute;left: 50px;top: 50px;background: orange;}
10         .div2 {margin-top: 10px;height: 80px;border: 1px solid blue;position: relative; background-color: red;z-index: 1}
11 
12     </style>
13 </head>
14 <body>
15 <div class="div1">
16     <div class="div11"></div>
17 </div>
18 <div class="div2">
19 
20 </div>
21 </body>
22 </html>

View Code

3、e.stopPropagation(); ie6 、7 不支持

解決思路：

1  e = e || window.event;
2      if (e.stopPropagation) e.stopPropagation();
3      else if (window.event) 
4         window.event.cancelBubble = true;// 針對 IE

View Code

4、IE不支持getElementsByClassName

解決思路：如果涉及到的元素很少，可以考慮加個id,反之給document對象里加入getElementsByClassName這個方法，這樣的寫法有一個好處，你什么不要改，這也算是符合了開閉原則。調用時加個判斷，如果支持getElementsByClassName則不管，不支持則調用自己定義的getElementsByClassName；

 1 var getElementsByClassName = function (searchClass, node,tag) { 
 2 if(document.getElementsByClassName){ 
 3 var nodes = (node || document).getElementsByClassName(searchClass),result = []; 
 4 for(var i=0 ;node = nodes[i++];){ 
 5 if(tag !== "*" && node.tagName === tag.toUpperCase()){ 
 6 result.push(node) 
 7 }else{ 
 8 result.push(node) 
 9 } 
10 } 
11 return result 
12 }else{ 
13 node = node || document; 
14 tag = tag || "*"; 
15 var classes = searchClass.split(" "), 
16 elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), 
17 patterns = [], 
18 current, 
19 match; 
20 var i = classes.length; 
21 while(--i >= 0){ 
22 patterns.push(new RegExp("(^|\s)" + classes[i] + "(\s|$)")); 
23 } 
24 var j = elements.length; 
25 while(--j >= 0){ 
26 current = elements[j]; 
27 match = false; 
28 for(var k=0, kl=patterns.length; k<kl; k++){ 
29 match = patterns[k].test(current.className); 
30 if (!match) break; 
31 } 
32 if (match) result.push(current); 
33 } 
34 return result; 
35 } 
36 }

View Code

5、IE 雙邊距

解決思路：浮動元素加上display:inline

6、IE 清除浮動：
解決思路：

1、在IE8+以及主流的瀏覽器中，都支持:after這個偽類

1 .clear{   
2 content: " ";
3     clear: both;
4     visibility: hidden;
5     display: block;
6     height: 0;
7 }

View Code

2、增加空元素，不推薦

給代碼增加了無意義的元素；

3、父容器增加overflow ，不推薦

overflow 嵌套多了多少會存在問題；

4、推薦的寫法

1 .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
2 .clearfix { *zoom:1; }

View Code

......待續 20170818 ......

7、ios input select 邊框陰影

1 input{
2     -webkit-appearance: none;
3 }

8、new Date(‘2017-08-18’)的瀏覽器兼容性問題

在ie 以及 Firefox 不能正確生成Date()對象

1 var time2 = (timeend+' 23:59:59').toString();
2 timestart = new Date(Date.parse(str.replace(/-/g,"/"))).getTime();
3 timeend = new Date(Date.parse(str.replace(/-/g,"/"))).getTime();

View Code

'2017-08-18' 無法被各個瀏覽器中，使用new Date(str)來正確生成日期對象的，正確做法是把日期格式轉換為 2017/08/18

9、ios 中body 無法監聽click事件

在body 中嵌套一層容器如 div section artifact

1 <body>
2 <div class='contentMainBox'>
3 ...
4 ...
5 ...
6 
7 </div>
8 </body>

View Code

10、audio ios不能自動播放

如果是基於web 如微信：

 1 utility = {
 2     playAudio: function (id, src) {
 3         var audio = $('#' + id);
 4         if (audio.attr('src') == 'undefined') {
 5             audio.attr('src', src);
 6         }
 7 
 8         function audioAutoPlay() {
 9             audio[0].play();
10             document.addEventListener("WeixinJSBridgeReady", function () {
11 
12                 audio[0].play();
13 
14             }, false);
15 
16         }
17 
18         audioAutoPlay();
19 
20     }
21 
22 }
23 
24 utility.playAudio('music','mp3/music.mp3');

View Code

或者可以通過監聽第一次觸摸則播放

利用jq one 監聽事件

1     $('.mainBox').one('touchstart', function () {
2         isAuto = true;
3         $('.musicBtn').click();
4     });

View Code

---------待續---------------

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 瀏覽器兼容問題——IE7/IE/8下背景圖片不顯示解決VUE在IE瀏覽器中的兼容問題關於IE、火狐等瀏覽器兼容問題的總結 IE瀏覽器兼容問題(基於vue) Easyui和IE瀏覽器的兼容問題 IE瀏覽器兼容問題（unset不生效） IE瀏覽器下常見的CSS兼容問題 IE低版本瀏覽器兼容問題 IE瀏覽器兼容問題(上)——html和css的兼容寫法 IE瀏覽器兼容問題(上)——html和css的兼容寫法