如何解决不同浏览器之间的兼容性问题
发布网友
发布时间：2022-03-26 08:45
共4个回答
懂视网
时间：2022-03-26 13:06
以ie浏览器为例，浏览器不兼容的解决方法如下：
1、首先打开IE浏览器，随意进入一个页面；
2、点击“工具”选项，会跳出一个菜单，下拉菜单选择“兼容性视图设置”选项；
3、进入兼容性视图设置之后，填入所需要设置兼容模式的网址，点击添加，最后点击关闭即可。
Internet Explorer（旧称：Microsoft Internet Explorer、Windows Internet Explorer），简称IE或MSIE，是微软公司推出的图形用户界面网页浏览器，曾是使用最广泛的网页浏览器之一。自从1995年开始，它被内置在各个新版本的Windows作业系统作为默认浏览器，也是微软Windows操作系统组成部分。2015年3月微软确认将放弃IE品牌，转而在windows 10上，以Microsoft Edge取代，并停止发布Internet Explorer 11之前版本的安全性更新。
IE开发计划开始于1994年夏天，微软为抵抗当时主流的网景浏览器（NetscapeNavigator），要在Windows中开发适合自己的浏览器。但微软并没有时间从零开始，因此微软和Spyglass合作，于是IE从早期一款商业性的专利网页浏览器Spyglass Mosaic派生出来，虽然Spyglass Mosaic与NCSA Mosaic（首款应用得最广泛的网页浏览器）甚为相似，但Spyglass Mosaic则相对地较不出名并使用了NCSA Mosaic少量的源代码。
热心网友
时间：2022-03-26 10:14
工具/原料
电脑 QQ浏览器
方法/步骤
1、首先打开电脑，在电脑桌面上找到QQ浏览器图标双击。
2、进入界面后，点击屏幕右上方的三条横杆。
3、弹出选项卡，点击“设置”。
4、进入新界面，点击屏幕上方的“高级”。
5、鼠标点击选择“智能内核模式”，即可解决浏览器的兼容性问题。
热心网友
时间：2022-03-26 11:32
常见的浏览器兼容性问题与解决方案大致有以下九种形式：
一、不同浏览器的标签默认的外边界和内填充不同
问题表现：不加样式控制下，margin和padding差异较大
解决方案：css里 *{margin:0; padding:0;}
备注：这是最常见也是最易解决的一个兼容问题，几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0
二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大
问题表现：IE6后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性
备注：横向浮动的div布局，使用上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
问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙
解决方法：对左侧left的盒子补上_margin-right: -3px;
热心网友
时间：2022-03-26 13:07
常见的浏览器兼容性问题与解决方案大致有以下九种形式：
一、不同浏览器的标签默认的外边界和内填充不同
问题表现：不加样式控制下，margin和padding差异较大
解决方案：css里 *{margin:0; padding:0;}
备注：这是最常见也是最易解决的一个兼容问题，几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0
二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大
问题表现：IE6后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性
备注：横向浮动的div布局，使用上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
问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型一列固定，第二列自适应，IE6出现之间3px间隙
解决方法：对左侧left的盒子补上_margin-right: -3px;
