常见兼容性问题?

1、png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理.

2、浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

3、IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

浮动ie产生的双倍距离(IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。)
#box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

4、渐进识别的方式,从总体中逐渐排除局部。

首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。 接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
} 

5、IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.

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

6、IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

7、Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

8、超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

 L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

9、怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。现在可以使用[html5]推荐的写法:

<doctype html>

10、上下margin重合问题,IE和FF都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。

 
  解决方法,养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。 

11、ie6对png图片格式支持不好(引用一段脚本处理)

12、IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

时间: 2024-08-09 06:33:45

常见兼容性问题?的相关文章

html常见兼容性问题

html常见兼容性问题? 1.双边距BUG float引起的  使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active 4.IE z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决' 7.select 在ie6下遮盖 使用ifram

IE下常见兼容性问题总结

概述 本小菜平时主要写后台程序,偶尔也会去写点前端页面,写html.css.js的时候,会同时开着ie6.ie7.ie8.ie9.chrome.firefox等浏览器进行页面测试,和大部分前端开发一样,经常被ie折磨,下面就总结一些常见的浏览器兼容性问题,放一起方便自己总结学习,我知道这类型文章,很多大牛都总结过,且写的特别专业.不过我写的都是自己最近碰到的,本人技术一般,也希望各位多加指点. 一.IE6/IE7对display:inline-block的支持欠缺 1)表现描述 这个应该算是很经

CSS常见兼容性问题总结

你想要执行的代码 你想要执行的代码 浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等. 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS ha

ie6的常见兼容性问题

(一):选择器的兼容问题 1.对于一般的选择器如id选择器.类选择器.标签选择器,IE6和其他浏览器一样都兼容: 2.子代选择器(E>F),序选择器(E:first-child.E:last-child).兄弟选择器(E+p)这些选择器IE6都不兼容{主要是css2中的选择器,css3中的先不谈} (二):双倍margin问题 1.何为双倍的margin? 解释:就是说当我们连续浮动元素时,如果浮动元素的浮动方向和我们设置的margin方向相同时,浮动元素的第一个元素就会具有双倍的margin值

JS常见兼容性问题

兼容性问题:函数(方法)兼容 描述:部分W3C指定的函数,有部分老的浏览器不支持 解决: 条件判断,如果有,则使用,添加原型方法,例如 String 的 trim 方法 if(!String.prototype.trim){ String.prototype.trim = function(){ return this.replace(/^\s\s*/,'').replace(/\s\s*$/,'') } } 兼容性问题:浏览器视口.屏幕.页面宽高获取 解决: 1. 获得当前页面 HTML文档所

移动端常见兼容性问题及解决办法

当使用transform:translate3d(-50%,-50%,0)居中弹框(div)时,在pc端,内部的文字会模糊.解决办法:给body定义样式 body{ font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif; } 用position:absolute/fixed;把一个按钮固定在页面的底部,在android系统中,当调用输入法时,该按钮会

IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:hidden. 3. border:1px dotted #000: 1px dotted 在IE6下不支持 解决方案:切背景平铺 4. margin传递:解决方案:a.父级或自己浮动; b.给元素加 overflow:hidden;zoom:1; 5. 在IE6下父级有边框的时候,子元素的margi

html常见兼容性问题?

1.双边距BUG float引起的  使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active 4.IE z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决' 7.select 在ie6下遮盖 使用iframe嵌套 8.为什么没有办法

干货!前端常见兼容性问题

各大浏览器兼容问题 1. HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法:统一使用document.getElementById("idName"); 2. const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用va