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 */
}
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">