web钱端吧 关注:4贴子:339

IE与FF 的不同 及解决方法

只看楼主收藏回复

1. HTML对象获取问题
FireFox:document.getElementById("idName");
ie:document.idname或者document.getElementById("idName").
解决办法:统一使用document.getElementById("idName");


1楼2016-01-19 16:35回复
    1. const问题
    Firefox下,可以使用const关键字或var关键字来定义常量;
    IE下,只能使用var关键字来定义常量.
    解决方法:统一使用var关键字来定义常量.


    2楼2016-01-19 16:35
    回复
      1. event.x与event.y问题
      IE下,event对象有x,y属性,但是没有pageX,pageY属性;
      Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
      解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.


      3楼2016-01-19 16:36
      回复
        1. window.location.href问题
        说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
        Firefox1.5.x下,只能使用window.location.
        解决方法:使用window.location来代替window.location.href.


        4楼2016-01-19 16:37
        回复
          1. firefox与IE的父元素(parentElement)的区别
          IE:obj.parentElement
          firefox:obj.parentNode
          解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
          2. document.formName.item(”itemName”) 问题
          问题说明:IE下,可以使用document.formName.item(”itemName”) 或document.formName.elements ["elementName"];Firefox 下,只能使用document.formName.elements["elementName"]。
          解决方法:统一使用document.formName.elements["elementName"]。


          5楼2016-01-19 16:37
          回复
            1. frame问题
            以下面的frame为例:
            <frame src="xxx.html" id="frameId" name="frameName" />
            (1)访问frame对象:
            IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
            Firefox:只能使用window.frameName来访问这个frame对象.
            另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
            (2)切换frame内容:
            在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
            如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame),可以在frame中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";


            6楼2016-01-19 16:38
            回复
              1. 模态和非模态窗口问题
              说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
              解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
              如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
              例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
              2. 集合类对象问题
              问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。
              解决方法:统一使用 [] 获取集合类对象。
              3. 自定义属性问题
              问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute() 获取自定义属性。
              解决方法:统一通过getAttribute() 获取自定义属性。
              4. input.type属性问题
              问题说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写。
              解决办法:不修改input.type属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。


              7楼2016-01-19 16:38
              回复
                style.height和style.width等等的赋值方式(IE/FF/Chrome/Opera/Safari)
                  利用JavaScript给某个元素的高度style.height和宽度style.width赋值(或margin、padding),应当采用规范的方式。
                  例如:
                  document.getElementById(”div1″).style.height=100;
                发现赋值成功,然而火狐(FF)却不生效,因为规范的赋值方式应该是带单位的:
                document.getElementById(”div1″).style.height=“50px”;
                  若数值是变量,则进行字符串连接:
                document.getElementById(”div1″).style.height=myHeight+“px”;
                包括了IE,火狐,谷歌Chrome,Opera,Safari浏览器。同理,margin、padding之类的赋值也一样的。


                9楼2016-01-19 16:41
                回复
                  1. cursor:hand VS cursor:pointer
                  firefox不支持hand,但ie支持pointer
                  解决方法: 统一使用pointer
                  1. innerText在IE中能正常工作,但在FireFox中却不行.
                  需用textContent。
                  解决方法:
                  if(navigator.appName.indexOf("Explorer") > -1){
                  document.getElementById('element').innerText = "my text";
                  } else{
                  document.getElementById('element').textContent = "my text";
                  }


                  10楼2016-01-19 16:42
                  回复
                    1. CSS透明
                    IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
                    FF:opacity:0.6。
                    2. css中的width和padding
                    在IE7和FF中width宽度不包括padding,在Ie6中包括padding.
                    3. FF和IEBOX模型解释不一致导致相差2px
                    box.style{width:100;border 1px;}
                    ie理解为box.width = 100
                    ff理解为box.width = 100 + 1*2 = 102 //加上边框2px
                    解决方法:div{margin:30px!important;margin:28px;}
                    注意这两个margin的顺序一定不能写反, IE不能识别!important这个属性,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
                    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
                    4. IE5 和IE6的BOX解释不一致
                    IE5下div{width:300px;margin:0 10px 0 10px;}
                    div 的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
                    5. ul和ol列表缩进问题
                    消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
                    经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
                    6. 元素水平居中问题
                    FF: margin:0 auto;
                    IE: 父级{ text-align:center; }
                    7. Div的垂直居中问题
                    vertical-align:middle; 将行距增加到和整个DIV一样高:line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。


                    11楼2016-01-19 16:43
                    回复
                      1. margin加倍的问题
                      设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
                      例如:
                      <div id=”imfloat”>
                      相应的css为
                      #imfloat{
                      float:left;
                      margin:5px;/*IE下理解为10px*/
                      display:inline;/*IE下再理解为5px*/}
                      2. IE与宽度和高度的问题
                      IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
                      比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
                      #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
                      3. 页面的最小宽度
                      如上一个问题,IE不识别min,要实现最小宽度,可用下面的方法:
                      #container{ min-width: 600px; width:expression(document.body.clientWidth< 600? "600px": "auto" );}
                      第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
                      4. DIV浮动IE文本产生3象素的bug
                      左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
                      #box{ float:left; width:800px;}
                      #left{ float:left; width:50%;}
                      #right{ width:50%;}
                      *html #left{ margin-right:-3px; //这句是关键}
                      <div id="box">
                      <div id="left"></div>
                      <div id="right"></div>
                      </div>


                      12楼2016-01-19 16:44
                      回复
                        #text {
                        height:30px;
                        vertical-align:middle;
                        line-height:30px;
                        }
                        <input type="text" id="text"> 文本框中文本居中


                        14楼2016-01-19 17:35
                        回复
                          1. IE6下图片下有空隙产生
                          解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.


                          15楼2016-01-19 17:39
                          回复
                            1. 为什么web标准中IE无法设置滚动条颜色了
                            解决办法是将body换成html
                            <style type="text/css">
                            <!--
                            html {
                            scrollbar-face-color:#f6f6f6;
                            scrollbar-highlight-color:#fff;
                            scrollbar-shadow-color:#eeeeee;
                            scrollbar-3dlight-color:#eeeeee;
                            scrollbar-arrow-color:#000;
                            scrollbar-track-color:#fff;
                            scrollbar-darkshadow-color:#fff;
                            }
                            -->
                            </style>


                            16楼2016-01-19 17:42
                            回复
                              超链接访问过后hover样式就不出现的问题
                              被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
                              <style type="text/css">
                              a:link {}
                              a:visited {}
                              a:hover {}
                              a:active {}
                              </style>


                              17楼2016-01-19 17:45
                              回复