IE和chrom兼容性分析(持续更新)

2023年6月21日发(作者：)

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中的⽅式进⾏修改：/s/blog_；⼿动修改input的style属性，如style = “height = xxpx;width = xxpx”,本⼈在项⽬中采⽤第⼆种⽅式进⾏修改。5、IE和W3C中的事件处理异同W3C ntListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的⽅法。obj是要添 加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执⾏，否则 在冒泡阶段执⾏

EventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的⽅法

微软IE⽅法Event(evtype,fn)——IE提供的添加事件处理函数的⽅法。obj是要添加事件的对象，evtype是事件类型，带on前缀，fn是事件处理函数，IE不⽀持事件捕获

Event(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/);

background-repeat: no-repeat;后来经过不断调试和探索，最终发现 只需加以下2⾏代码便可以解决CSS中设置了按钮背景图，但是浏览器中背景图失效不显⽰的⽹页前端代码兼容性问题： background-image: url(images/);

background-repeat: no-repeat;

background-color: transparent;//关键就是将背景⾊设置为透明，好让背景图显⽰出来。这个代码在DW的IDE环境下是没有的，需要你⼿动输⼊这种背景颜⾊透明的CSS代码

border:none;7、⽤（ ；）空格浏览器之间，显⽰的不⼀样，对不起等现象。解决⽅法可以⽤半⾓空格&ensp；或者全⾓空格&emsp；就可以了，&ensp；相当于半格中⽂字符的宽度，&emsp；相当于⼀个中⽂字符宽度，以下为其它空格的注释。 ；

它叫不换⾏空格，全称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: ）。（待续）

2023年6月21日发(作者：)

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中的⽅式进⾏修改：/s/blog_；⼿动修改input的style属性，如style = “height = xxpx;width = xxpx”,本⼈在项⽬中采⽤第⼆种⽅式进⾏修改。5、IE和W3C中的事件处理异同W3C ntListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的⽅法。obj是要添 加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执⾏，否则 在冒泡阶段执⾏

EventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的⽅法

微软IE⽅法Event(evtype,fn)——IE提供的添加事件处理函数的⽅法。obj是要添加事件的对象，evtype是事件类型，带on前缀，fn是事件处理函数，IE不⽀持事件捕获

Event(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/);

background-repeat: no-repeat;后来经过不断调试和探索，最终发现 只需加以下2⾏代码便可以解决CSS中设置了按钮背景图，但是浏览器中背景图失效不显⽰的⽹页前端代码兼容性问题： background-image: url(images/);

background-repeat: no-repeat;

background-color: transparent;//关键就是将背景⾊设置为透明，好让背景图显⽰出来。这个代码在DW的IDE环境下是没有的，需要你⼿动输⼊这种背景颜⾊透明的CSS代码

border:none;7、⽤（ ；）空格浏览器之间，显⽰的不⼀样，对不起等现象。解决⽅法可以⽤半⾓空格&ensp；或者全⾓空格&emsp；就可以了，&ensp；相当于半格中⽂字符的宽度，&emsp；相当于⼀个中⽂字符宽度，以下为其它空格的注释。 ；

它叫不换⾏空格，全称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: ）。（待续）