JavaScript多浏览器兼容之搜狗浏览器篇 Javascript和CSS在IE与搜狗浏览器中的兼容问题及解决方法。如Javascript中，统一使用document.formname.elements[“elementname”]等解决多浏览器差异。CSS方面，DOCTYPE影响处理，解决如div垂直居中等问题，还提到多种浏览器差异及bug，建议采用标准XHTML编写页面，兼顾主流浏览器，使CSS解释更规范。下面是小编精心整理编写的关于“ JavaScript多浏览器兼容之搜狗浏览器篇 ”的详细教程，请大家仔细阅览学习：

javascript 多搜狗浏览器兼容

一、document.formname.item(”itemname”) 问题

问题说明：IE下，可以使用 document.formname.item(”itemname”) 或 document.formname.elements[“elementname”]；搜狗浏览器下，只能使用document.formname.elements[“elementname”]。

解决方法：统一使用document.formname.elements[“elementname”]。

二、集合类对象问题

问题说明：IE下，可以使用 () 或 [] 获取集合类对象；搜狗浏览器下，只能使用 [] 获取集合类对象。

解决方法：统一使用 [] 获取集合类对象。

三、自定义属性问题

问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；搜狗浏览器下，只能使用 getAttribute() 获取自定义属性。

解决方法：统一通过 getAttribute() 获取自定义属性。

四、eval(”idName”)问题

问题说明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName的HTML对象；搜狗浏览器下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

五、变量名与某HTML对象ID相同的问题

问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，搜狗浏览器下则不能；搜狗浏览器下，可以使用与HTML对象ID相同的变量名，IE下则不能。

解决方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。

六、const问题

问题说明：搜狗浏览器下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。

解决方法：统一使用var关键字来定义常量。

七、input.type属性问题

问题说明：IE下 input.type 属性为只读；但是搜狗浏览器下 input.type 属性为读写。

解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

八、window.event问题

问题说明：window.event 只能在IE下运行，而不能在搜狗浏览器下运行，这是因为搜狗浏览器的event只能在事件发生的现场使用。

解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)

九、innerText问题

问题说明：innerText在IE中能正常工作，但是innerText在搜狗浏览器中却不行。

解决方法：在非搜狗浏览器中使用textContent代替innerText。

示例：if(navigator.appName.indexOf(“Explorer”) > -1){document.getElementById(‘element’).innerText = “my text”;} else{document.getElementById(‘element’).textContent = “my text”;}

[注] innerHTML 同时被ie、搜狗浏览器等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。

十、Table操作问题

问题说明：ie、搜狗浏览器以及其它浏览器对于 table标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。document.appendChild在往表里插入行时搜狗浏览器支持，IE不支持

解决办法：把行插入到TBODY中，不要直接插入到表

解决方法：//向table追加一个空行：var row = otable.insertRow(-1);var cell = document.createElement(“td”);cell.innerHTML = “”;cell.className = “XXXX”;row.appendChild(cell);

[注] 建议使用JS框架集来操作table，如JQuery。

十一、对象宽高赋值问题

问题说明：搜狗浏览器中类似 obj.style.height = imgObj.height 的语句无效。

解决方法：统一使用 obj.style.height = imgObj.height + ‘px’;

十二、setAttribute(‘style’,’color:red;’)

搜狗浏览器支持(除了IE，现在所有浏览器都支持)，IE不支持

解决办法：不用setAttribute(‘style’,’color:red’)而用object.style.cssText = ‘color:red;'(这写法也有例外)

最好的办法是上面种方法都用上，万无一失

十三、类名设置

setAttribute(‘class’,’styleClass’)搜狗浏览器支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)

解决办法：setAttribute(‘class’,’styleClass’)setAttribute(‘className’,’styleClass’)或者直接 object.className=’styleClass’;IE和FF都支持object.className。

十四、用setAttribute设置事件

var obj = document.getElementById(‘objId’);

obj.setAttribute(‘onclick’,’funcitonname();’);

搜狗浏览器支持，IE不支持

解决办法：IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数如下：

var obj = document.getElementById(‘objId’);

obj.onclick=function(){fucntionname();};

这种方法所有浏览器都支持

十五、建立单选钮

搜狗浏览器以外的浏览器

var rdo = document.createElement(‘input’);

rdo.setAttribute(‘type’,’radio’);

rdo.setAttribute(‘name’,’radiobtn’);

rdo.setAttribute(‘value’,’checked’);

IE:

var rdo =document.createElement(“”);

解决办法：这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了

万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

CSS 多搜狗浏览器兼容

1、DOCTYPE 影响 CSS 处理

2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用!important 多设一个 height 和 width

3、FF: 支持!important， IE 则忽略， 可用!important 为 FF 特别设置样式

4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px

解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

浏览器差异

1、ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对搜狗浏览器有效。

[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在搜狗浏览器中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在搜狗浏览器中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果。

2、CSS透明问题

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。

[注] 最好两个都写，并将opacity属性放在下面。

3、CSS圆角问题

IE：ie7以下版本不支持圆角。FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border-radius- bottomright:4px;。

[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。

4、cursor:hand VS cursor:pointer

问题说明：搜狗浏览器不支持hand，但ie支持pointer ，两者都是手形指示。

解决方法：统一使用pointer。

5、字体大小定义不同

对字体大小small的定义不同，搜狗浏览器中为13px，而IE中为16px，差别挺大。

解决方法：使用指定的字体大小如14px。

并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在搜狗浏览器中都会被忽略，而IE中却默认显示为空格（约3px）。

6、CSS双线凹凸边框

IE：border:2px outset;。FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8white;-moz-border-right-colors:#404040#808080;-moz-border-bottom-colors:#404040 #808080;

浏览器bug

1、IE的双边距bug

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案：在这个div里面加上display:inline;

例如：

#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}

#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}

关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、搜狗浏览器、Opera等主流浏览器。很多情况下，FF和Opera的CSS解释标准更贴近CSS标准，也更具有规范性。

2、IE选择符空格BUG

一个空格也可以使样式失效。 看下面一段代码：

对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。

这段代码对的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter{font-size:300%}后，显示就正常了。但是同样的代码，在搜狗浏览器下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在搜狗浏览器中，加不加空格都可以正常处理。

关于《JavaScript多浏览器兼容之搜狗浏览器篇》这篇文章的具体内容就介绍到这里，希望能对大家有所帮助。更多相关资讯和教程请关注 搜狗输入法!