网页设计中如何解决浏览器兼容问题？

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

惠企百科
2022-12-11 · 百度认证:北京惠企网络技术有限公司官方账号

惠企百科

惠企百科网是一家科普类综合网站，关注热门中文知识,集聚互联网精华中文知识,本着自由开放、分享价值的基本原则,向广大网友提供专业的中文知识平台。

向TA提问

关注

展开全部

1.目标不居中；\x0d\x0a一般新手都爱出现这个问题，主要原因是对盒子模型不够理解，如果发现你的页面没有居中，基本上有两种情况：\x0d\x0aa. 如果是在浏览器中没有居中，就是没盒子，就是要用一个大DIV把所有需要居中元素装起来，然后给盒子一个css样式margin:0 auto;\x0d\x0ab. 如果想要盒子内的元素居中，必须定义盒子的绝对宽度,然后给盒子一个CSS样式text-align:center; \x0d\x0a\x0d\x0a2.目标在不同浏览器上的位置不同；\x0d\x0aa.首先不要去急着找hack,先看一下自己的代码有没有错误，DW里有一个“检查浏览器兼容性”功能特别实用；\x0d\x0ab.然后，尽量让目标的位置初始化，使之在所有浏览器都处在同一个位置，这个条件的前提是，不写hack，最后再一个方位一个方位调整。\x0d\x0a\x0d\x0a3.目标与目标之间距离在各个浏览器上的区别；\x0d\x0aa.给其中一个目标加背景颜色；\x0d\x0ab.观察背景色与另外一个目标的距离，查看是不是这个目标造成的距离问题\x0d\x0ac.如果不是上一个目标，那就给另外一个目标也加上背景颜色。\x0d\x0ad.这样很容易判断出那个目标造成的原因，就针对那个目标进行修改。\x0d\x0a\x0d\x0a4.IE6兼容问题最多的一个，浮动问题。\x0d\x0aa.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，解决方法：\x0d\x0a只需要给这个DIV加一个样式：display:inline;\x0d\x0ab.布局的时候经常会遇到这种情况：发现有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现。\x0d\x0a解决的办法：清除浮动，在设置过浮动的那个DIV下面加一个DIV，给个样式clear:both;如下\x0d\x0a

\x0d\x0a\x0d\x0a5.IE8兼容问题\x0d\x0aie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了 \x0d\x0a\x0d\x0a6.背景兼容问题\x0d\x0a有的时候明明给一个DIV加了背景颜色或背景图片，但是却显示不出来或者显示不全。\x0d\x0a解决办法：首先，有可能是DIV没有设置绝对高度。如果设置了宽度和高度还没有效果，那么给DIV一个样式display:block；（通常a:hover加背景的时候经常遇到）。\x0d\x0a另外，如果高度必须要设置成自动的话，那么就给DIV一个样式overflow:hidden;\x0d\x0a\x0d\x0a7.IE7和Firefox兼容问题\x0d\x0a很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好使，就是FF下有问题。\x0d\x0a解决方法：height:100px;/*FF下显示100的高*/ +height:120px;/*IE678下显示120高*/\x0d\x0a原理：FF不识别加过符号的属性，而IE识别。