css 区分 ios android,[CSS]解决安卓和ios ，样式或其他兼容问题

input \button 样式问题 , ios用的样式不管用。

解决方法：在css样式里面加

.input{

-webkit-appearance: none;/*解决ios样式问题*/

}

ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态

解决方法：禁止页面缩放

input获取焦点时，去掉外层的高亮

input:focus {

outline:none;

}

css常用样式集合

文字强制换行：

word-wrap:word-break;

word-break:break-all;

强制不换行：

white-space:nowrap;

iphone及ipad下输入框默认内阴影: -webkit-appearance: none;

在360浏览器中input有黄色背景解决办法： 在input中加入 autocomplete=“off” 即可。

防止按钮点击时背景闪烁:

html{-webkit-tap-highlight-color: transparent;}

去除移动端下按钮点击背景变暗：

-webkit-tap-highlight-color:rgba(0,0,0,0)

去除输入框黄色边框： outline:none;

改变斜体： font-style:normal;

某些安卓手机圆角失效: background-clip: padding-box;

删除线样式-贯穿线样式 : text-decoration:line-through

手型： cursor:pointer;

字体间距： letter-spacing: 2px;

textarea 在浏览器中固定大小和禁止拖动:

resize: none;

动画效果无限播放：

animation-iteration-count:infinite;

-webkit-animation-iteration-count:infinite;

IOS中防止复制和保存图片： touch-callout:none;

禁止长按链接与图片弹出菜单：

img{ -webkit-touch-callout: none; }

android 上去掉语音输入按钮：

input::-webkit-input-speech-button { display: none }

流畅滚动：

body{

-webkit-overflow-scrolling:touch;

overflow-scrolling: touch;

}

禁用iPhone中Safari的字号自动调整：

html{ -webkit-text-size-adjust： none; }

css3背景渐变：

background: -moz-linear-gradient(top, #ededf0,#fcfcfc,#fdfdfd ,#f4f4f6,#eaeaee);

输入框默认显示文字： placeholder=“请输文字” IE8不支持

解决placeholder会出现文本位置偏上的情况：

line-height：normal

改变表单输入框placeholder的颜色值:

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

去除 a/button/input标签被点击时产生的边框,

去除ios a标签被点击时产生的半透明灰色背景：

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

文字两端对齐：

text-align:justify;

text-justify:distribute-all-lines;/ie6-8/

text-align-last:justify;/* ie9*/

-moz-text-align-last:justify;/ff/

-webkit-text-align-last:justify;/chrome 20+/

背景图片做成视觉滚差：

background:url(…/images/bg_1.jpg) no-repeat center center / cover;

background-color: transparent;

background-attachment: fixed;

position: relative; overflow:hidden

分栏布局，给父元素定义：

display: flex;

display: -webkit-box;

display:-moz-box;

display:-webkit-flex;

display:-ms-flexbox;

分栏布局，给子元素定义：

-webkit-box-flex:3.5;

-webkit-flex:3.5;

-ms-flex:3.5;

flex:3.5;

分栏布局，垂直居中：

flex-direction:column;

display: flex;

display: -webkit-flex;

justify-content: center;

-webkit-justify-content: center;

align-items:center;

-webkit-align-items: center;

超出2行，文字省略：

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

文字溢出隐藏，省略：

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

-o-text-overflow: ellipsis;

-icab-text-overflow: ellipsis;

-khtml-text-overflow: ellipsis;

-moz-text-overflow: ellipsis;

-webkit-text-overflow: ellipsis;

背景半透明：

background:rgba(0,0,0,0.2) none repeat scroll !important; /实现FF背景透明，文字不透明/

background:#000;

filter:Alpha(opacity=20);

fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;

width:-moz-fit-content;

width:-webkit-fit-content;

width:fit-content;

margin:auto

目前只支持谷歌和火狐浏览器。

禁止输入框输入空格：

οnkeyup=“this.value=this.value.replace(/\s+/g,’’)”

目前遇到的就这些，后面再更