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

常见兼容性问题

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;

<style  type="text/css">
.outer  {
width:  215px;
height: 100px;border:1px solid red;
overflow:   auto;
position:relative;      /*  修复bug   */ 
}

 .inner {
 width: 100px;
 height:200px;
 background-color:  purple;
</style>

<div class="outer">
    <div class="inner"></div>
</div>

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

<style  type="text/css">
 .p:hover, .hover{background:   purple; } 
 </style>

<p  class="p" id="target">
aaaa    bbbbb
<span>DDDDDDDDDDDd</span>
aaaa lkjlkjdf j
</p>

<script type="text/javascript"> 
function addClass(elem, cls){
    if(elem.className){elem.className   +=  ' '+ cls; } 
    else {elem.className = cls;} 
}

function removeClass(elem,  cls){
var className = ' ' + elem.className + ' '; 
var reg = new RegExp(' +' + cls + ' ','g');             elem.className  =   className.replace(reg,  ' ').replace(/^ +|  +$/, ''); }

var target = document.getElementById('target');

 if (target.attachEvent) {               target.attachEvent('onmouseenter', function () {                               addClass(target, 'hover'); });      

target.attachEvent('onmouseleave',  function () {                               removeClass(target, 'hover'); }) 
} 
</script>