记录一些遇到的css问题

记录一些遇到的css问题，不同的设备对css的支持不一样，可能出现不同的效果

ios底部input输入框的fixed问题 ​

  • ios的fixed可能会没有效果，具体可以去搜搜
  • 过长的页面会使fixed变为absolute，固定的内容就随页面移动了
  • 解决方法
  • 将父级元素改为absolute，或者外层加一个absolute的div
  • 将自身的fixed改为absolute
html
<div class="box">
  <div class="content"></div>
  <div class="input"></div>
</div>
css
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.content {
  height: calc(100% - 60px);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.input {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

ios 的底部输入框在输入法弹起后被挡住 ​

  • 试了千百种方法，没找到完美的解决办法
  • 我的暴力临时方法
  • 通过 js 判断是否是 ios 设备，如果是
  • 在 input 获取焦点后设置其父级的高度为 当前高度 - 被挡住的高度
  • 在 input 失去焦点后恢复其父级的高度
  • 如果不是则不变
  • 这样很可能有时会使输入法与输入框之间出现间隙

行内元素之间多余的间隔 ​

  • 由于html的结构关系，行内元素会出现多余的间隔
  • 两个 img 之间也是一样
  • 简单的解决办法就是将父级的 font-size 指定为 0px
  • 行内元素的间隙就消失了
  • 注意：这是行内元素字体的行高也同时消失了
  • 需要重新指定行内字体的行高

行内元素顶部对齐 ​

  • 行内元素的顶部没有对齐
  • 需要设置行内元素 vertical-align: top;
  • 这时行内元素上面就齐平了

IE 的 backgroun-img 图像消失 ​

  • 设置 display 为 inline-block 或 block 解决

隐藏 select 的箭头 ​

css
select {
  appearance: none;
}
select::-ms-expand { 
  display: none;
}

## 隐藏 input number 的箭头

``` css
input[type="number"] {
  appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
}

设置全局的默认字体样式 ​

css
body, input, textarea, button, select {
  font-family: "";
}

修改边框类型 ​

css
box-sizing: border-box;

去除手机点击的蓝色遮罩 ​

css
-webkit-tap-highlight-color: transparent;

创建时间:

最近更新: