文档章节

Web 兼容性

木子jd
 木子jd
发布于 2015/12/01 18:18
字数 344
阅读 19
收藏 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; }


© 著作权归作者所有

共有 人打赏支持
上一篇: RequireJS
木子jd
粉丝 1
博文 16
码字总数 7602
作品 0
广州
程序员
私信 提问
IE兼容性之杂项(Quirks)模式

此文转载,记录下遇到的问题,暂时没有仔细考究。 IE=EmulateIE7 标签的作用 对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题。Windows Internet Explorer 8 引入了文本兼容性模式...

Rella蕾拉
2015/04/08
0
0
mobile web 前端研发流程 【转载】

接触Mobile WEB前端开发将近一年时间了,在这不算短的时间里,通过吸取圆心、沉鱼等前辈们的经验以及不断的摸索和实战,总结出一套自己的Mobile WEB“研发流程”。为什么叫“研发”流程而不是...

石秋风
2012/04/18
0
2
JSP页面兼容性视图浏览失败

各位大佬好, 现在有个web平台,被集成到了另一个CS架构的客户端里面,就是给个无登录链接让用户在客户端点击看到网页,可是遇到个问题:浏览器兼容性视图显示,我们的web平台在浏览器里面只...

什么的什么
2017/11/23
43
1
浏览器兼容性测试应该如何做?

如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作。 同时,主流浏览器(IE,Firefox,Chrome,Opera,Saf...

白一客
2017/06/15
178
1
Internet Explorer 11 Enterprise Mode 详解

白驹过隙,已经三月未能及时更新博文,今天为大家分享有关IE 11 Enterprise Mode(企业模式)两个章节内容,之前看到好多群里讨论有关IE11企业模式的问题,这里简单做一下汇总,第一章为IE11企...

wenzhongxiang
2016/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
1
0
可重入锁和非可重入锁

广义上的可重入锁指的是可重复可递归调用的锁,在外层使用锁之后,在内层仍然可以使用,并且不发生死锁(前提得是同一个对象或者class),这样的锁就叫做可重入锁。 可重入锁: ReentrantLoc...

狼王黄师傅
昨天
1
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
1
0
使用 React 和 Vue 创建相同的应用,他们有什么差异?

在工作中应用 Vue 之后,我对它有了相当深刻的理解。 不过,俗话说「外国的月亮比较圆」,我好奇「外国的」 React 是怎么样的。 我阅读了 React 文档并观看了一些教程视频,虽然它们很棒,但...

阿K1225
昨天
2
0
2天闭门培训|以太坊智能合约从入门到实战(北京)

2天培训 16个课时 探寻技术原理,精通以太坊智能合约开发 以太坊智能合约是现在应用的最广泛的区块链应用开发方式,HiBlock区块链社区针对以太坊智能合约的学习特别推出2天闭门研修班,通过2...

HiBlock
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部