[学习交流] 【广州前端】- 移动端Webapp22个兼容问题解决方案

1. IOS移动端click事件300ms的延迟响应
移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

2.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。
3. 三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案，

1.是通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取

2.是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）

4. h5底部输入框被键盘遮挡问题
h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){

      if($(document).height() < oHeight){

      $("#footer").css("position","static");
}else{

      $("#footer").css("position","absolute");
}

});
  关于Web移动端Fixed布局的解决方案，这篇文章也不错

http://efe.baidu.com/blog/mobile-fixed-layout/
5.不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />
6.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
7.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
8.消除 transition 闪屏
-webkit-transform-style: preserve-3d;    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;    /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
9.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉    this.value = this.value.replace(/\u2006/g, '');

10.禁止ios和android用户选中文字
-webkit-user-select:none
11.在ios和andriod中,audio元素和video元素在无法自动播放
应对方案：触屏即播

$('html').one('touchstart',function(){
audio.play()
})
12.ios下取消input在输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
13.android下取消输入语音按钮
input::-webkit-input-speech-button {display: none}
14  CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
  -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
16.fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案：可用iScroll插件解决这个问题
17.阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
18 Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

19 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法：window.onunload = function(){};
20. calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
21 iOS6下伪类:hover
除了<a>之外的元素无效；在Android下则有效。类似

div#topFloatBar_l:hover #topFloatBar_menu { display:block; }
这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

22 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

pointer-events: none;
23. Zepto点透的解决方案
zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。

引入fastclick.js，在页面中加入如下js代码

1 window.addEventListener( "load", function() {
2    FastClick.attach( document.body );
3 }, false );
或者有zepto或者jQuery的js里面加上

1 $(function() {
2    FastClick.attach(document.body);
3 });
当然require的话就这样：

1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);
方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

1 $("#cbFinish").on("touchend", function (event) {
2    //很多处理比如隐藏什么的
3    event.preventDefault();
4 });
方案三：延迟一定的时间(300ms+)来处理事件

1 $("#cbFinish").on("tap", function (event) {
2    setTimeout(function(){
3    //很多处理比如隐藏什么的
4    },320);
5 });

本帖最后由老哥哥于 2018-6-7 19:54 编辑

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?

首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是：

(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body {overflow-x: hidden}。

2.ios页面橡皮弹回效果遮挡页面选项卡？

(1) 有时body和html的height: 100%去除掉问题可能就没有了。
(2) 到达临界值的时候在阻止事件默认行为

[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
   startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
   endY = e.touches[0].pageY;  //记录手指触摸的移动中的坐标
   //手指下滑，页面到达顶端不能继续下滑
   if(endY>startY&& $(window).scrollTop()<=0){
      e.preventDefault();
   }
//手指上滑，页面到达底部能继续上滑
   if(endY<startY&& $(window).scrollTop()+
      $(window).height()>=$('body')[0].scrollHeight){
      e.preventDefault();
   }
})

有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题，我们可以在弹出弹出时给底层页面加上一个类名，类名禁止页面滑动这样下层的橡皮筋效果就会被禁止，就不会影响弹窗层。

3.IOS机型margin属性无效问题？

(1) 设置html body的高度为百分比时，margin-bottom在safari里失效
(2) 直接padding代替margin

4.Ios绑定点击事件不执行？

(1)添加样式cursor ：pointer。点击后消除背景闪一下的css：-webkit-tap-highlight-color:transparent;

5.Ios键盘换行变为搜索？

首先，input 要放在 form里面。
这时 "换行" 已经变成 “前往”。
如果想变成 “搜索”，input 设置 type="search"。

6.Jq对a标签点击事件不生效？

出现这种情况的原因不明，有的朋友解释：我们平时都是点击的A标签中的文字了。所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。但是我觉得不合理，虽然找不到原因但是解决办法还是有的。

(1)document.getElementById("abc ").click();
(2)$("#abc ")[0].click();

7.有时因为服务器或者别的原因导致页面上的图片没有找到？

这是我们想需要用一个本地的图片代替没有找的的图片

[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

1

2

3

4

5

6

7

8

8.transform属性影响position:fixed？

(1)规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素.

9.ios对position: fixed不太友好，有时我们需要加点处理？

在安卓上面，点击页面底部的输入框，软键盘弹出，页面移动上移。
而ios上面，点击页面底部输入框，软键盘弹出，输入框看不到了。。。查资料说什么的都有，iscroll,jquery-moblie，absolute，fixe，static都非常复杂，要改很多。。。
让他弹出时让滚动条在最低部

[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

01

02

03

04

05

06

07

08

09

10

10.jq validate插件验证问题？

(1)所以的input必须有name不然会出错

11.有时手机会出现断网的情况，我没可能会对断网的情况做一些处理？

(1)navigator.onLine可判断是否是脱机状态.

12.判断对象的长度？

(1)用Object.keys，Object.keys方法返回的是一个数组，数组里面装的是对象的属性。

[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

01

02

03

04

05

06

07

08

09

10

var person = {
"name" : "zhangshan",
"sex" : "man",
"age" : "50",
"height" : "180",
"phone" : "1xxxxxxxxxx",
"email" : "xxxxxxxxx@xxx.com"
};
var arr = Object.keys(person);
console.log(arr.length);

(2)Object.getOwnPropertyNames(obj).length

13.上一题我们用到了Object.keys与Object.getOwnPropertyNames他们的区别？

Object.keys定义：返回一个对象可枚举属性的字符串数组；
Object.getOwnPropertyNames定义：返回一个对象可枚举、不可枚举属性的名称；
属性的可枚举性、不可枚举性：定义：可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。

[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

1

2

3

4

5

6

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length); //output：1
console.log(Object.getOwnPropertyNames(obj).length); //output：2
console.log(Object.keys(obj)); //output：Array[1] => [0: "prop1"]
console.log(Object.getOwnPropertyNames(obj)); //output：Array[2] => [0: "prop1", 1: "prop2"]

综合实例：

[JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

14.移动开发不同手机弹出数字键盘问题？

(1)type="tel"
iOS和Android的键盘表现都差不多
(2)type="number"
优点是Android下实现的一个真正的数字键盘
缺点一：iOS下不是九宫格键盘，输入不方便
缺点二：旧版Android（包括微信所用的X5内核）在输入框后面会有超级鸡肋的小尾巴，好在Android 4.4.4以后给去掉了。
不过对于缺点二，我们可以用webkit私有的伪元素给fix掉：

[JavaFX] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

1

2

3

4

5

6

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
}

(3)pattern属性

pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。
显而易见，pattern的属性值要用正则表达式。
实例简单的数字验证
数字的验证有两个：
<input type="number" pattern="d">
<input type="number" pattern="[0-9]*">

15.input[number]类型输入非数字字符

js获取的值是空；比如-12，+123等

16.Javascript：history.go()和history.back()的用法与区别？

简单的说就是：go(-1):返回上一页，原页面表单中的内容会丢失；back():返回上一页，原页表表单中的内容会保留。history.go(-1):后退+刷新history.back():后退
之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟javascript：history.go()和history.back()的区别类似。
Chrome和ff浏览器后退页面，会刷新后退的页面，若有数据请求也会提交数据申请。类似于history.go(-1);
而safari（包括桌面版和ipad版）的后退按钮则不会刷新页面，也不会提交数据申请。类似于javascript：history.back();

17.Meta基础知识：

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例，为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
空白页基本meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签

<meta name="renderer" content="webkit">

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

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">

18.移动端如何定义字体font-family？

@ --------------------------------------中文字体的英文名称
@ 宋体 SimSun
@ 黑体 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体 NSimSun
@ 新细明体 MingLiU
@ 细明体 MingLiU
@ 标楷体 DFKai-SB
@ 仿宋 FangSong
@ 楷体 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

19.打电话发短信写邮件怎么实现？

[HTML] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

// 一、打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
// 二、发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
// 三、写邮件
<a href="mailto:863139978@qq.com">点击我发邮件</a>
//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:863139978@qq.com;384900096@qq.com">点击我发邮件</a>
//5.包含主题，用?subject=
<a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
<a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
//7.内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:863139978@qq.com?body=http://www.baidu.com">点击我发邮件</a>
//8.内容包含图片（PC不支持）
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
//9.完整示例
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>

20.移动端touch事件（区分webkit和winphone）？

// 以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

//TouchEvent说明：
touches：屏幕上所有手指的信息
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息

//参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target：当前元素

//事件响应顺序
ontouchstart > ontouchmove > ontouchend > onclick

21.点击元素产生背景或边框怎么去掉

[CSS] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

01

02

03

04

05

06

07

08

09

10

11

12

//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
}
// 也可以
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">

22.美化表单元素

//一、使用appearance改变webkit浏览器的默认外观
input,select { -webkit-appearance:none; appearance: none; }

//二、winphone下，使用伪元素改变表单元素默认外观
//1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰
select::-ms-expand { display:none; }

//2.禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3.禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }

23.移动端字体单位font-size选择px还是rem？

// 如需适配多种移动设备，建议使用rem。以下为参考值：
html { font-size: 62.5%; } //10*16 = 62.5%
//设置12px字体这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级
body { font-size:12px; font-size:1.2rem; }

24.input标签添加上disable属性在ios端字体颜色不兼容的问题？

[CSS] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
[color=white !important]

[color=white !important]?

1

2

3

4

5

6

input[disabled],input:disabled,input.disabled{
  color: #3e3e3e;
  -webkit-text-fill-color: #3e3e3e;
  -webkit-opacity:1;
  opacity: 1;
}

25.IOS 的光标大小问题

IE：不管该行有没有文字，光标高度与font-size一致。
FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。
Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候)，如果没有line-height，则是与font-size一致。
IOS中情况和Chrome 相似。

设置字体大小和行高一致，然后通过 padding 撑开大小
只给IE浏览器设置 line-height
-ms-line-height:40px;

点击查看更多精彩前端资源

点击有惊喜

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】- 移动端Webapp22个兼容问题解决方案

0 个回复