浏览器兼容问题总结

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

<input type="button" value="123" />

解决方法：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>

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    input{
        float:left;
        width:20px;
        height:20px;
    }
    img{
        float:left;
        margin-left:10px;
        border-radius:50px;
        padding:20px;
        margin-top:-20px;
        padding-bottom:0;
    }
    .content{
        float:left;
        margin-left:15px;
        margin-top:-10px;
    }
    p.test{
        margin-top:200px;
    }
    </style>

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

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

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

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