浏览器兼容问题总结

偏执的太偏执、 2022-07-24 10:20 267阅读 0赞

1：IE7浏览器的button随着值的增加两边留白增加

解决方法：overflow:visible;

2：IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效

解决方法：父元素position:relative;

3:解决IE7图片下方出现几像素的空白

vertical-align:top;或者display:block;或者把img的父元素的font-size:0;line-heght:0;

4:$("body").css("overflow","hidden");阻止滚动条滚动

在IE6,7中不生效，解决方法$("html").css("overflow","hidden");

5:p中的文本换行时在IE6,7中会导致文本间有很大间隔。

<p>减肥的减肥的是解放军的建安费纠纷的房间的副驾驶的积分

范德萨发奖金按附件的设计费就爱上风发的是附件是京东方</p>

解决方法：将所有文本放在一行显示，不能换行。  
6:<div style="margin:300px;">  
        <input type="radio" checked="checked" />  
        <img src="images/p1.jpg" width="50"/>  
        <div class="content">  
            <p>123</p>  
            <p>456</p>  
        </div>  
        <br clear="all"/>  
        <p class="test">哈哈哈哈哈哈哈哈哈哈哈哈</p>  
    </div>

在IE7浏览器下margin-top对.test元素无效

7：华为大屏浏览器下吸底元素被下面的工具栏遮挡

8：iPhone的Safari浏览器会自动把数字解析成tel标签，类似的有email，adress.

解决方法:<meta name="format-detection" content="telephone=no,email=no,adress=no"/>