浏览器兼容性 浏览器的兼容模式在哪里改

什么是浏览器的兼容性

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。

浏览器兼容性 浏览器的兼容模式在哪里改

在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

扩展资料

在Internet Explorer和Netscape Navigator的争战中，两个浏览器各自推出非标准的HTML语句（如Navigator的BLINK标签——闪烁效果，Internet Explorer的MARQUEE标签——跑马灯效果），以专有的特色功能分割市场。

微软以此产品差异化策略（英语：Product Differentation）成功开发了一群忠实客户和数量上有一定影响的IE Only网站。

同时，网页浏览标准只规定了接口，并没有接口实现的详细规范，使得各浏览器对相同的功能使用了不同的实现方法，并导致了功能实现的差异。这些差异按程度由显示方面到核心概念的都存在。浏览器兼容性就是指标准功能在各浏览器的差异程度，差异的解决方法是为浏览器兼容。

对网页编写代码的识别能力，及最新技术的支持能力，不同浏览器有不同标准，表现出来就是，同一个网页，有一些浏览器能够正常运行，而另一些浏览器就不能运行了，这就是不兼容。还有一种就是，装了一个浏览器后其他的浏览器就出问题了，两者不能共存。

像flashplayer这样的加载在浏览器中 页面里面的flash可以用这个解析播放，以上只是一个例子，像这种软件很多 比如迅雷下载等下载软件 ***毒软件等等。

不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一

兼容就是新版本可以允许老版本的数据在其中正常运行

所谓浏览器兼容性，一种是指浏览器能稳定地工作在某操作系统之中，就说这个浏览器对这个操作系统是兼容的。再就是在多任务操作系统中，几个同时运行的浏览器之间，如果能稳定地工作，不出经常性的错误，就说它们之间的兼容性好，否则就是兼容性不好。另一种就是浏览器共享，几个浏览器之间无需复杂的转换，即能方便地共享相互间的数据，也称为兼容。

希望能帮到你！

如何解决不同浏览器之间的兼容性问题

常见的浏览器兼容性问题与解决方案大致有以下九种形式：

一、不同浏览器的标签默认的外边界和内填充不同

问题表现：不加样式控制下，margin和padding差异较大

解决方案：css里 *{margin:0; padding:0;}

备注：这是最常见也是最易解决的一个兼容问题，几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0

二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大

问题表现：IE6后面的一块被顶到下一行

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

备注：横向浮动的span布局，使用上margin进行边界设置时，必然会碰到此问题

三、设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值

问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

备注：一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度，即使标签是空内容，标签的高度还是会有默认行高。

四、行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug

问题表现：IE6的间距比超过设置的间距

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

备注：行内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在用float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，高度失效，所有在后面补上display:table。

五、图片默认有间距

问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起作用

解决方案：使用float属性为img布局

备注：img标签是行内属性标签，只要不超出容器高度，img会排在一行里，使用float是比较好的选择

六、标签最低高度设置min-height不兼容

问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器

解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;

height: 200px; overflow:visible;}

备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。

七、光标手形

问题表现：firefox不支持hand，但ie支持pointer

解决方案：统一使用cursor:pointer;

八、字体大小定义不同

问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大

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

九、IE6 3px bug

问题表现：左侧span浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙

解决方法：对左侧left的盒子补上_margin-right: -3px;

常见的浏览器兼容性问题与解决方案大致有以下九种形式：

一、不同浏览器的标签默认的外边界和内填充不同

问题表现：不加样式控制下，margin和padding差异较大

解决方案：css里 *{margin:0; padding:0;}

备注：这是最常见也是最易解决的一个兼容问题，几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0

二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大

问题表现：IE6后面的一块被顶到下一行

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

备注：横向浮动的span布局，使用上margin进行边界设置时，必然会碰到此问题

三、设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值

问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

备注：一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度，即使标签是空内容，标签的高度还是会有默认行高。

四、行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug

问题表现：IE6的间距比超过设置的间距

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

备注：行内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在用float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，高度失效，所有在后面补上display:table。

五、图片默认有间距

问题表现：几个img标签放在一块，有些浏览器会有默认的间距，有通配符也不起作用

解决方案：使用float属性为img布局

备注：img标签是行内属性标签，只要不超出容器高度，img会排在一行里，使用float是比较好的选择

六、标签最低高度设置min-height不兼容

问题表现：min-height本身就是一个不兼容的css属性，所以设置min-height时不能兼容所有浏览器

解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;

height: 200px; overflow:visible;}

备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。

七、光标手形

问题表现：firefox不支持hand，但ie支持pointer

解决方案：统一使用cursor:pointer;

八、字体大小定义不同

问题表现：对字体大小small定义不同，Firefox为13px，而IE为16px，差别比较大

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

九、IE6 3px bug

问题表现：左侧span浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙

解决方法：对左侧left的盒子补上_margin-right: -3px;

如何解决浏览器的兼容问题

1、打开浏览器，进入任意页面，点击“工具”选项，出现下拉菜单，选择“兼容性视图设置”选项；

2、进入兼容性视图设置之后，填入所需要设置兼容模式的网址，点击添加，最后点击关闭即可；

3、重新打开经过设置之后的网页，如果地址栏后有像破碎纸片一样的图标，说明兼容模式已经设置成功，在工具的下拉菜单也同样看到兼容模式前打钩，说明网页的兼容模式已经设置成功。