IE和chrom兼容性分析（持续更新）

近期由于要做一个浏览性兼容的项目，由于原来项目基于IE7兼容模式的浏览器内核，现在要更换为Chrome的的浏览器内核，所以需要解决一些页面的浏览器兼容性问题：

1、盒模型相关。由于IE浏览器的盒模型的content和chrome的content+pandding+border相等，如下图所示：

2、小于 12px 字号的文字在Chrome下会被强迫渲染为 12px 字号，所以原来在IE中过小的字体将会在Chrome中设置为12px。

3、Chrome浏览器会压缩OPTION 元素中的全角空格，将其作为半角空格渲染。

4、在IE中input表单的button和chrome中的button不一致，有两种解决办法：

按照blog中的方式进行修改：http://blog.sina.com.cn/s/blog_60b35e8301014g8c.html；
手动修改input的style属性，如style = “height = xxpx;width = xxpx”,本人在项目中采用第二种方式进行修改。

5、IE和W3C中的事件处理异同

W3C DOM

obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则在冒泡阶段执行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法

微软IE方法

obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，带on前缀，fn是事件处理函数，IE不支持事件捕获
obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法，evtype包含on前缀

6、为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式代码文件中设置了背景图background-image竟然失效不起作用不显示了！在IE、火狐等各浏览器下的浏览效果，尽管该代码在DW(DreamWeaver)中显示正常，但是在浏览器中它的背景图片确实没有出现没有显示出来。

先后排除了以下CSS代码冲突出错和不兼容的可能性：

1.背景图是PNG，兼容性不好，浏览器不支持。（改用JPG和GIF试了下，结果一样是input 和 button按钮背景图不显示）。

2.没有让input 和 button这种表单代码成为块元素BLOCK。

3.没有设置元素的高和宽。（设置了width和height之后，background-image背景图依旧失效）

原本CSS代码如下：

background-image: url(images/kankanbei.jpg);
background-repeat: no-repeat;

后来经过不断调试和探索，最终发现只需加以下2行代码便可以解决CSS中设置了按钮背景图，但是浏览器中背景图失效不显示的网页前端代码兼容性问题：

background-image: url(images/kankanbei.jpg);
background-repeat: no-repeat;
background-color: transparent;//关键就是将背景色设置为透明，好让背景图显示出来。这个代码在DW的IDE环境下是没有的，需要你手动输入这种背景颜色透明的CSS代码
border:none;

7、用（&nbsp；）空格浏览器之间，显示的不一样，对不起等现象。解决方法可以用半角空格&ensp；或者全角空格&emsp；就可以了，&ensp；相当于半格中文字符的宽度，&emsp；相当于一个中文字符宽度，以下为其它空格的注释。

&nbsp；
它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

&ensp；
它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

&emsp；
它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

&thinsp；
它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

&zwnj；
它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌

&zwj；
它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。

（待续）

IE和chrom兼容性分析（持续更新）相关推荐

Beta 讨论分析——持续更新ing
wonderland Beta 讨论分析标签(空格分隔): 软工实践 wonderland 主要工作: info信息: 1.关联账号界面:hbb 2.标签检索界面:hbb 3.近期活跃度(cf.hd ...
网站兼容性（持续更新）
站点兼容性,其实没什么好说的,不论是什么样的平台,输出到页面的终究是HTML.CSS.JS.VBS等等.因为每种浏览器的解释引擎不同,造成相同元素不同解析执行以及显示效果的不同,主要为CSS.JS.在 ...
okhttp原理分析(持续更新)，包含okio了解,拦截器以及断点下载的使用
1. 原理 1. okio 最基本的接口只有两个:Sink(writer).Source(Read),大概相当于OutputStream和InputStream在原生接口中的地位.这两个接口中只定义了 ...
广搜（bfs）模板太好用了！bfs详细讲解--超详细题目分析(持续更新题目----)【算法分享】
广搜讲解目录广搜回顾广搜题目 noj1541八数码问题题目描述: 题目要求即样例题目分析题解代码[注解详细]---理解BFS noj1652 僵尸来了题目描述题目要求及样例题目分析题 ...
windows主机日志分析(持续更新)
本文使用的环境为我前面博客中介绍的搭建方法.具体链接请参考windows日志转发_leeezp的博客-CSDN博客_windows日志转发安装 ewk (es+winlogbeat+kibana) ...
【方案总览】全志方案选型总览与分析-持续更新
今天给大家聊一下全志方案的选型问题,全志在业内都称为万年A7,那么我们首先来看看改革开放30周年以来全志的一些主流芯片和个人对其的一些评价. 全志A20: 在大吉出道的时候,A20刚好到了市场末期,大 ...
Eclipse 的常见报错、警告和原因分析、解决方式以及相关操作快捷键小结（持续更新）
文章目录前言一.常见的三种类型错误二.运行时错误总结前言 Eclipse 作为我们开发中最为常用的一款 IDE,功能齐全(虽然近几年被 IDEA 占尽了风头),但是最为基本的一些操作我们是要 ...
web安全从基础术语、windows/linux基础到安全漏洞/病毒木马挖掘与分析利用（持续更新）
web安全知识从基础术语.windows/linux基础到安全漏洞/病毒木马挖掘与分析利用(持续更新) 专业术语 web环境搭建 windows基础 linux基础 linux系统命令 linux命令 ...
【推荐】2022年环保行业研究报告产业发展前景市场投资行情分析白皮书（附件中为网盘地址，报告持续更新）
[推荐]2022年环保行业研究报告产业发展前景市场投资行情分析白皮书(附件中为网盘地址,报告持续更新),每月至少更新一次. 下载地址:https://download.csdn.net/downloa ...

IE和chrom兼容性分析（持续更新）

IE和chrom兼容性分析（持续更新）相关推荐

最新文章

热门文章