[CSS]解决安卓和ios ，样式或其他兼容问题

1. input \button 样式问题 , ios用的样式不管用。
   解决方法：在css样式里面加

.input{
	-webkit-appearance: none;/*解决ios样式问题*/
} 

2. ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态
   解决方法：禁止页面缩放

<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

3. 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,’’)” 

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