浏览器兼容性问题

通用头部样式

https://zhidao.baidu.com/question/488543156.html

使用Trident内核的浏览器:IE、Maxthon、TT;

使用Gecko内核的浏览器:Netcape6及以上版本、FireFox;

使用Presto内核的浏览器:Opera7及以上版本;

使用Webkit内核的浏览器:Safari、Chrome。

二  html兼容问题

主要是新的html5增加了许多新的标签,但是低版本的浏览器不支持。

1
  1.  <header>header</header>  
  2.     <section>session</section>  
  3.     <footer>footer</footer>  

 为了解决这个问题,我们可以手动创建H5标签,但是如果所有H5标签都需要这样一个一个去创建的话,过程很麻烦,不过这里先写一下具体是怎么创建的。Js代码如下:

[javascript] view plain copy
  1. <script>  
  2.     document.createElement("header");  
  3.     document.createElement("section");  
  4.     document.createElement("footer");  
  5. </script>  
显示结果:

通过js创建的元素被认为是自定义标签,默认是内联元素,而如果想按照固定的宽高进行显示的话,必须是块元素

需要添加上  displayblock;  

这里有一个问题是,如果我们需要非常非常多的标签,每个元素都要自己一个一个创建就非常麻烦,那么我们可以通过引入一个H5 JS插件来实现。这里我采用了html5shiv.js


2、元素浮动之后,能设置宽度的话就给元素设置宽度;如果需要宽度是内容撑开的,就给它里边的块元素加上浮动

  1. <div class="box">  
  2.     <div class="left">  
  3.         <h2>左边</h2>  
  4.     </div>  
  5.     <div class="right">  
  6.         <h2>右边</h2>  
  7.     </div>  
  8. </div>  
样式代码:

[html] view plain copy
  1. .box{  
  2.     width:400px;  
  3.     border:1px solid #00A2E9;  
  4.     overflow: hidden;  
  5. }  
  6. .left{  
  7.     background-color: yellow;  
  8.     float: left;  
  9. }  
  10. .right{  
  11.     background-color: red;  
  12.     float: right;  
  13. }  
  14. h2{  
  15.     margin: 0;  
  16.     height: 30px;  
  17. }  
在Chrome下的效果是:


接下来说一下解决方法:

1)给元素设置宽度

     修改h2的代码如下:

  1. h2{  
  2.     margin0;  
  3.     height30px;  
  4.     width100px;  
  5. }  
     在IE6下的结果现在达到了:

2)如果需要宽度是内容撑开的,就给它里边的块元素加上浮动

     现在问题来了,有时候我不知道里面的h2到底要多宽,我需要根据内容进行撑开,所以就不能设置统一的width,此时,可以通过给h2这个块元素加上浮动。

    修改代码如下:

  1. h2{  
  2.     margin0;  
  3.     height30px;  
  4.     floatleft;  
  5. }  
   在IE6下的效果完成了:

3、第一块元素浮动,第二块元素加上margin值等于第一块元素的宽度,在IE6下会有间隙问题

两块元素都加上浮动

4, IE6下子元素超出父级宽高,会把父级的宽高撑开

子元素的div居然把父级元素的宽高撑开了,那么我们在写代码的过程中一定要注意不要让子元素的宽高超出父元素的宽高。

三 css 

   在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10 px   ,但第一个对象距左边有20px。

        **出现条件:**block元素+浮动+margin。

       在IE6中一行中的最后一块被放到了下面的一行。

解决方案:

在float标签样式控制中加入 display:inline,将其转化为行内属性。

为什么第二个对象和第一个对象之间就不存在双边距?

因为浮动都有其相应的对象,只有相对于其父对象浮动,才会出现这样的问题。第一个对象是相对于父对象的,而第二个对象是相对于第一个对象的。所以第二个对象在设置后不会出现问题。

 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超过了自己设置的高度

          出现这个问题的原因是IE8之前浏览器会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

解决方案:

给超出高度的标签设置overflow:hidden,或者设置行高line-height小于你设置的高度。

3 图片有默认的间距(几个img标签放在一起的时候,有些浏览器会有默认的间距,设置了通配符也不起作用)

解决方案:

使用float属性为img布局

因为img标签是行内属性的标签,所以只要不超过容器宽度,img标签都会排在一行里。但是部分浏览器的img标签之间有个间距。去掉这个间距使用float是正道。

标签最低高度设置min-height不兼容

解决办法是使用expression来实时获取元素当前适合宽高

解决方案:

如果我们要设置一个标签的最小高度200px;需要进行的设置为:

{
min-height:200px;
height:auto !important;
height:200px;
overflow:visible;
}
     max-width:1280px;_width:expression(documentElement.clientWidth > 1280 ? "1280px" : "auto");
      min-width:980px;_width:expression(documentElement.clientWidth < 980 ? "980px" : "auto");
      max-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ?           "800px" : "");
      min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ?            "600px" : "");

当内容小于一个值(如300px)时,容器的高度为300px,当内容的高度大于这个值的时候,容易高度被撑高,而不是出现滚动条。

5  css盒子模型在IE6下解析问题

元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。IE6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

解决方案:

不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

6  css3动画问题

@keyframes 不兼容 IE 9 以及更早版本的浏览器

@keyframes move

@-webkit-keyframes move

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}


@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}


@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}

}

@-ms-keyframes mymove

@-moz-keyframes mymove

</style>

7 background-clip   background-size   border-bottom-left-radius:2em;

8  
border-radius:25px;  不兼容

behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */


http://vdisk.weibo.com/s/DpUqi

https://www.cnblogs.com/leejersey/p/3187039.html

 background-clip:content-box; padding-box



9 
 fixed属性值无效 position:fixed;top:100px;left:10px;

我们的解决办法是改变元素的悬挂为定位并使用expression来实时处理元素当前显示位置

      position:fixed;

     _position:absolute;

      top:100px;

      _top:expression(documentElement.scrollTop + 100 + "px");

      left:10px;

      expression工作时的表现还是可以接受,唯一的缺点是性能

    定位元素上下或左右属性同时赋值时无效

10
position:absolute;top:0;bottom:0;left:0;right:0;
  画布实际表现为并没有按预想的全屏伸展开,问题产生原因是ie6下上下或左右定位属性同时存在时只识别上与左;

为元素赋于宽高属性即可

      width:100%;height:100%;position:absolute;top:0;left:0;


11

 alpha透明度

#myopacity {
   
    opacity: .4;
   
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
   
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
}
  1. .transparent_class {          
  2.       filter:alpha(opacity=50);          
  3.       -moz-opacity:0.5;          
  4.       -khtml-opacity: 0.5;          
  5.       opacity: 0.5;          
  6. }

 12 width等百分比值计算时有误

如恰好有4个该元素充满外部容器,外容器宽度不是恰到好处时实际宽度会溢出,第4个元素会换行,问题的产生是因为ie6/7网页计算自适应处理能力不足;较为稳妥的处理方案是为ie6/7少许减少宽度

      width:25%;*width:24%;


13 清除浮动

.clearfix:after{height:0;display:block;content:".";visibility:hidden;clear:both;} 

.clearfix{zoom:1;} 

.clear{height:0;overflow:hidden;font-size:0;clear:both;}


14

悬挂元素工作时表现失常,页面滚动时有明显的停顿抖动

      浏览器环境:多浏览器

      position:fixed;

      原本该吸附在页面上的元素并没有令人满意的工作,原因是网页带给浏览器的性能消耗过大如网页上有动画等;直接办法是添加一个叫做隐藏被旋转元素背面的属性

      position:fixed;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;

      图片等元素不能自适应垂直居中


 四  javascript

兼容主要是各个浏览器对事件的支持有很大问题。

① 在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent

② 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值。

③ 事件处理中非常有用的event属性获得亦不相同,ie是window.event方式获得,获得目标元素ie为e.srcElement 标准浏览器为e.target

④ 然后在ie中是不能操作tr的innerHtml的

⑤ 然后ie日期函数处理与其它浏览器不大一致,比如: var year= new Date().getYear(); 在IE中会获得当前年,但是在firefox中则会获得当前年与1900的差值。

⑥ 获得DOM节点的方法有所差异,其获得子节点方法不一致。

IE:parentElement parentElement.children 
Firefox:parentNode parentNode.childNodes 
childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

当html中节点缺失时,IE和Firefox对parentNode的解释不同。例如:

<form> <table> <input/> </table> </form> 
IE:input.parentNode的值为空节点 
Firefox:input.parentNode的值为form 
解决方法:Firefox中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)

因为我们开发过程中一般都会使用类库,若是不使用,都会自己积累形成一个类库,所以就js而言,兼容性问题基本解决了。


展开阅读全文

没有更多推荐了,返回首页