兼容性问题解决方案css(公共)

1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异。

解决方案:这也是最容易解决的, 在css样式文件中重置margin,padding

*{

    margin:0;

    padding:0;

}

2. 图片默认有间距:

当几个img标签放到一起时,有些浏览器会有默认间距,加上第一条的设置的通配符样式也无用。

解决方式:使用float属性让其浮动,消除间距

3. min-height问题:

由于min-height本身就是一个不兼容的css属性,所以设置min-height不能被各个浏览器很好的兼容。

解决方案:如果需要设置一个最小宽度200px,需要进行如下设置:

.test{

    min-height:200px;

    height:auto !important;

    height:200px;

    overflow:visible;

}

4. 边距重叠问题:

当相邻的两个元素都设置了margin边距时,margin会取最大值,舍弃最小值。

 解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden
5. 移动端如何清除输入框内阴影

在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

input,

textarea {

border: 0; /* 方法1 */

-webkit-appearance: none; /* 方法2 */

}

6.处理IOS键盘弹出将h5页面放大的问题

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容