网页设计中常见的兼容性问题

浅浅的花香味﹌ 2022-06-10 00:11 287阅读 0赞

## **常见兼容性问题** ##

1、png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

2、浏览器默认的margin和padding不同。解决方案是加一个全局的  
\*\{margin:0;padding:0;\}来统一。

3、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

5、这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——*display:inline;将其转化为行内属性。(*这个符号只有ie6会识别)渐进识别的方式，从总体中逐渐排除局部。

6、首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。  
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css
            .bb{ background-color:red;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }

7、 IE下,可以使用获取常规属性的方法来获取自定义属性,  
也可以使用getAttribute()获取自定义属性;  
Firefox下,只能使用getAttribute()获取自定义属性。  
解决方法:统一通过getAttribute()获取自定义属性。

8、IE下,even对象有x,y属性,但是没有pageX,pageY属性;  
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

9、解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

10、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,  
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

11、超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:  
L-V-H-A : a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

--------------------

## **IE6下常见bug及解决方法** ##

ol内li的序号全为1，不递增。解决办法：为li设置样式display:list-item；

IE6不支持min-height，解决办法使用css hack：

.target {
            min-height:100px;
            height: auto!important;
            height: 100px;          // IE6下内容高度超过会自动扩展高度 }

IE6在设置 height 小于 font-size 时高度值为 font-size ，解决办法： font-size: 0;

IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

IE6-7不支持 display: inline-block 解决办法：设置inline并触发hasLayout

display:inline-block;
    display:inline; 
    zoom:   1;

IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法： 1）使用padding控 制间距。 2）浮动元素 display: inline; 这样解决问题且无任何副作用：css标准规定浮动元素 display:inline会自动调整为block

通过为块级元素设置宽度和左右margin为auto时，IE6不能实现水平居中，解决方法：为父元素设 置 text-align: center;

IE5-8不支持 opacity ，解决办法：

.opacity{ opacity:0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }

未定位父元素 overflow: auto; ，包含 position: relative; 子元素，子元素高于父元素时会溢出。 解决办法：1）子元素去掉 position: relative; ; 2）不能为子元素去掉定位时，父元素 position: relative;

IE6只支持 a 标签的 :hover 伪类，解决方法：使用js为元素监听mouseenter，mouseleave事件，添加 类实现效果：

网页设计中常见的兼容性问题

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaFX UI设计中常见的兼容性问题及解决方案

相关常见兼容性问题

相关 CSS常见兼容性问题总结

相关网页设计中常见的兼容性问题

相关网页的兼容性解决办法

相关兼容性测试,网页的设计工具

相关浏览器中常见的兼容性问题

相关 CSS常见兼容性问题总结

相关网页兼容性

相关常见的浏览器兼容性问题大汇总