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

您所在的位置：网站首页 › 安卓苹果字体下载 › [CSS]解决安卓和ios ，样式或其他兼容问题

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

#[CSS]解决安卓和ios ，样式或其他兼容问题| 来源: 网络整理| 查看: 265

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

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

【本文地址】

公司简介

联系我们