浏览器兼容问题总结

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"/>