工作上遇到的css 问题,兼容性问题总结
css 设置:
1.文字描边: -webkit-text-troke:1px #2A75BF;
text-stroke(文本描边)和text-fill-color(文本填充色)注意点:
目前这两个属性只有webkit内核的Safari和Chrome支持,例如: -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color:颜色值,和color属性差不多都是文字的样式;
同时使用text-fill-color和color属性,text-fill-color将覆盖color属性的颜色值;
text-fill-color可以使用透明值,即:text-fill-color:transparent;
2.文字大小写切换: text-transform: capitalize | uppercase | lowercase;
兼容性问题:
在ios里,
1)input框不能设置高度,行高,只能用padding 撑开
2)按钮尽量不用a 标签,要是用a 标签或其他标签来设置按钮,则css 要设置cursor:pointer ,这样才能点击
3)var date=new Date("2018-03-01").getTime() ; 在ios 里面时间格式必须得“2018/03/01”,安卓手机都可以 ;
4)form 表单里面的input,textarea,button 等在ios 存在默认背景,边框等,设置:-webkit-appearance:none;
5)layer.js 弹窗在安卓没问题,在苹果手机出现兼容,
<1>输入框光标下移很多, 现在解决的方法:点击按钮弹窗时,body设置“position:fixed”,关闭弹窗时,取消position“position:'' ”。(有其他的方法,大家可以给我留言,这个方法也是同事交流结果)
<2> 苹果手机,uc浏览器弹窗时,会把内容往上推,导致样式全乱,现在解决的方法:给弹窗加style,‘position:fixed,弹窗里面的内容居中展示’,在现在这个只有一个输入框的是可以,以后有问题再找解决办法
![工作上遇到的css 问题,兼容性问题总结 工作上遇到的css 问题,兼容性问题总结](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk5Ny82ZDljYWMyNWQwZjE3ZjViMjM3NjRlYTk3YjlmMGZiZC5wbmc=)
现在遇到的有这些问题,以后再更新其他遇到的问题
目前这两个属性只有webkit内核的Safari和Chrome支持,例如: -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color:颜色值,和color属性差不多都是文字的样式;
同时使用text-fill-color和color属性,text-fill-color将覆盖color属性的颜色值;
text-fill-color可以使用透明值,即:text-fill-color:transparent;
2.文字大小写切换: text-transform: capitalize | uppercase | lowercase;
兼容性问题:
在ios里,
1)input框不能设置高度,行高,只能用padding 撑开
2)按钮尽量不用a 标签,要是用a 标签或其他标签来设置按钮,则css 要设置cursor:pointer ,这样才能点击
3)var date=new Date("2018-03-01").getTime() ; 在ios 里面时间格式必须得“2018/03/01”,安卓手机都可以 ;
4)form 表单里面的input,textarea,button 等在ios 存在默认背景,边框等,设置:-webkit-appearance:none;
5)layer.js 弹窗在安卓没问题,在苹果手机出现兼容,
<1>输入框光标下移很多, 现在解决的方法:点击按钮弹窗时,body设置“position:fixed”,关闭弹窗时,取消position“position:'' ”。(有其他的方法,大家可以给我留言,这个方法也是同事交流结果)
<2> 苹果手机,uc浏览器弹窗时,会把内容往上推,导致样式全乱,现在解决的方法:给弹窗加style,‘position:fixed,弹窗里面的内容居中展示’,在现在这个只有一个输入框的是可以,以后有问题再找解决办法
现在遇到的有这些问题,以后再更新其他遇到的问题