Web 兼容性
博客专区 > 木子jd 的博客 > 博客详情
Web 兼容性
木子jd 发表于2年前
Web 兼容性
  • 发表于 2年前
  • 阅读 15
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

1、透明度:opacity

opacity:.6;

filter:alpha(opacity=70);

-moz-opacity:.6


2、移动端如何清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
input,
textarea {
  border: 0;
  -webkit-appearance: none;
}

3、禁止文本缩放
html {
    -webkit-text-size-adjust: 100%;
}

4、audio元素和video元素在ios和andriod中无法自动播放
应对方案:触屏即播
$('html').one('touchstart',function(){
    audio.play()
})


5、手机拍照和上传图片

<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋


6、//单行文本溢出
.xx{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
}
//多行文本溢出
.xx{
        display:-webkit-box !importmort;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;(数字2表示隐藏两行)
}


7、IE 兼容模式

优先使用最新版本的IE 和 Chrome 内核

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">



8、Display 属性会影响页面的渲染,请合理使用。

  • display: inline后不应该再使用 width、height、margin、padding 以及 float;

  • display: inline-block 后不应该再使用 float;

  • display: block 后不应该再使用 vertical-align;

  • display: table-* 后不应该再使用 margin 或者 float;

9、Button 按钮的点击时候出现蓝色边框

button{ outline:none; }


共有 人打赏支持
粉丝 1
博文 15
码字总数 7602
×
木子jd
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: