<meta content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>
<meta content="telephone=no" name="format-detection"/>
body{font-family:Microsoft Yahei,Hiragino Sans GB,Arial,Helvetica;}
- 去除苹果手机按钮自带渐变样式(input的button按钮)
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
- 将input或textarea设置为disabled后,在苹果手机上样式将被覆盖
input:disabled, textarea:diabled {
-webkit-text-fill-color: #000;
-webkit-opacity: 1;
color: #000;
}
input,textarea {
border: 0;
-webkit-appearance: none;
}
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
html *{-webkit-tap-highlight-color:rgba(255,255,255,0);}把透明度设置为0即可解决
input {-webkit-appearance:none!important; border-radius:0!important; }
.navbar{ width:100%; height:3rem; background:#fff; max-width:750px; position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; z-index:999;}
.navbar { width: 100%; height: 3rem; max-width:750px; background: #fff; position: fixed; top:100%; left: 50%; transform: translate(-50%,-100%); -webkit-transform: translate(-50%,-100%); z-index:999; }
.navbar { width: 100%; height: 3rem; max-width:750px; background: #fff; position: fixed; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); z-index:999; }
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
<input type="file" name="file" accept="image/*" >
<input type="file" name="file" capture="camera">
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
<style>
.slide-box { margin-top: 200px; overflow-x: scroll; display: -webkit-box; -webkit-overflow-scrolling: touch; }
.slide-item { width: 200px; height: 200px; border: 1px solid #ccc; margin-right: 30px; background:pink;}
.slide-box::-webkit-scrollbar {width:0;height:0;display: none;}
</style>
- height属性中的calc方法
父盒子是100%的高度,盒子里面的head部分固定为140px,内容部分始终为剩余的全部高度
height: calc(100% - 140px);