浏览器的兼容性问题

小灰灰 2021-01-12 00:32 864阅读 1赞

**一：css兼容性问题**

**1：通常我们写代码在css开始的时候就会写**

\*\{

margin:0;

padding:0;

\}

其主要原因就是不同浏览器对标签不加样式控制的情况下，各自的margin 和padding差异较大，这就会造成差异；

解决方案：css 里面加上上述代码 （通配符\*来设置各个标签的内外补丁是0）。

**2：块元素 设置float后，有margin情况下，本来在一行的东西，最后一个元素被挤到下一行；**

主要原因：布局用div+css布局的话，div设置float，横向距离用margin设置的话，IE6显示margin比设置的大，所以就会被挤到下一行；

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

**3：几个图片排列在一起，图片之间有缝隙，设置通配符间距为0也不好使，**

主要原因：mg标签放在一起的时候，有些浏览器会有默认的间距，通配符也不起作用。

解决方案：给img加上float属性；你建议用margin设置为负数解决为题，因为margin本身也有兼容性问题

**4:行元素 设置display:block;又设置float属性，会出现上述问题2的问题；**

解决方案：在display:block;后面加入display:inline;display:table;

**　5：透明度的问题**

一句话搞定背景透明：

.op\_class\{

filter:alpha(opacity=50);   //IE

-moz-opacity:0.5;   //火狐

-khtml-opacity: 0.5; //Safari (1.x)

opacity: 0.5; //Firefox, Safari, and Opera.

\}

**通常我们会看到有这样的写法： !important；!important这个属性IE不能识别，但别的浏览器可以识别**

例如火狐(FF) 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width ;

注意写的先后顺序不能颠倒；

写法：div\{margin:30px!important;margin:28px;\}

** 二：js常见的兼容性问题；**

**1：event = event || window.event;**

问题原因：window.event只能在IE下使用，不能在火狐下使用，火狐使用event

例如：在浏览器上获取鼠标的位置：

`　　　　<button onclick=` `"onClick()"` `>获得鼠标点击横坐标</button>`

`　　　　<script type=` `"text/javascript"` `>`

`　　　　　　function` `onclick(){`

`　　　　　　　　alert(event.clientX);`

`　　　　　　}`

`　　　　</script>`

上述这样写只能在ie下获取到鼠标的位置，想要在所有浏览器中获取到位置需改成：

`　　　　<button onclick=` `"onClick(event)"` `>获得OuterHTML</button>`

`　　　　<script type=` `"text/javascript"` `>`

`　　　　function` `onclick(event){`

`　　　　　　event = event || window.event;`

`　　　　　　　　alert(event.clientX);`

`　　　　　　}`

`　　　　</script>`

**　2：获取html对象的问题：**

FireFox获取方式document.getElementById("idName")

ie使用document.idname或者document.getElementById("idName")

解决办法：统一使用document.getElementById("idName");

3：**innerText的问题**

**　　　　**

**　　　　**innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；

解决办法：做个浏览器识别写个兼容性写法

`　　　　if` `(navigator.appName.indexOf(` `"Explorer"` `) > -1) {`

`　　　　　　document.getElementById(` `'element'` `).innerText =` `"my text"` `;`

`　　　　}` `else` `{`

`　　　　　　document.getElementById(` `'element'` `).textContent =` `"my text"` `;`

`　　　　}`

4： **AJAX获取XMLHTTP的区别**

`　　　　var` `xmlhttp;`

`　　　　if` `(window.XMLHttpRequest) {`

`　　　　　　xmlhttp =` `new` `XMLHttpRequest();`

`　　　　} elseif (window.ActiveXObject) {` `// IE的获取方式`

`　　　　　　xmlhttp =` `new` `ActiveXObject(` `"Microsoft.XMLHTTP"` `);`

`　　　　}`

注意：在IE中，xmlhttp.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。

关于兼容性问题是没完没了的，还是要有bug的处理能力才行，因为你永远不会知道你会碰到什么问题；

发表评论取消回复

表情：

评论列表（有 0 条评论，864人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器兼容性问题

[https://www.caniuse.com/][https_www.caniuse.com] 测试某个API，在不同浏览器的兼容程度 ![在这里插入图片描述][2

比眉伴天荒/ 2023年07月06日 11:52/ 0 赞/ 81 阅读

相关浏览器之兼容性问题

兼容性问题的由来 2001年微软发布了XP和IE6，在当时是世界上标准执行得最高的浏览器，并且有很多私有技术和容错技术，使得顶峰市场份额达到98%。于是骄傲的微软不理睬W3C

今天药忘吃喽~/ 2022年07月12日 02:14/ 0 赞/ 348 阅读

相关火狐浏览器的兼容性问题

window.open()方法一般是用来弹出窗口的. 范例:window.open('/PSL1/Index', '\_blank', 'height=600,width

旧城等待，/ 2022年06月04日 04:21/ 0 赞/ 298 阅读

相关关于浏览器兼容性问题

摘至本人有道云笔记《关于浏览器兼容性问题》今天在写python--web服务器的时候遇到一个浏览器兼容问题写响应头时 a='HTTP/1.1 20

忘是亡心i/ 2022年05月09日 02:34/ 0 赞/ 334 阅读

相关 safari浏览器兼容性问题

今天写代码遇到的一个bug，在chrome上显示得好好的时间，一到Safari就提示 “invalid date”，于是回来看代码（为了一目了然，进行一些处理）： v

亦凉/ 2022年04月13日 11:39/ 0 赞/ 440 阅读

相关浏览器的兼容性问题

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。解决方案：CSS

r囧r小猫/ 2022年04月11日 08:41/ 0 赞/ 390 阅读

相关浏览器兼容性问题

一、常见兼容性问题 1.双倍浮动bug 描述：块元素设置了float后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大，并且是2倍关系.

╰半橙微兮°/ 2022年03月27日 09:12/ 0 赞/ 457 阅读

相关浏览器兼容性问题

1，浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大

- 日理万妓/ 2021年08月29日 22:17/ 0 赞/ 597 阅读

相关 js 浏览器兼容性问题

0、js原生对象获取自定义属性值的问题： <input type="text" id="test" test="abc" /> 在IE下，发现使用$("\te

电玩女神/ 2021年06月24日 13:58/ 0 赞/ 669 阅读

相关浏览器的兼容性问题

一：css兼容性问题　　1：通常我们写代码在css开始的时候就会写　　　　*{ 　　　　　　margin:0; 　　　　　　padding:0; 　　　　　...

小灰灰/ 2021年01月12日 00:32/ 1 赞/ 865 阅读