web前端遇见的问题 css篇章

css方面问题:

input disabled属性在ios上显示浅色
解决办法
input{
-webkit-text-fill-color:black;
-webkit-opacity:1;
opacity: 1;
}

input 输入框ios上输入不了内容
原因：初始化css时有时我们会加入-webkit-user-select: none;禁掉用户可以选中页面中的内容
解决办法 去掉-webkit-user-select: none; 或者 input 添加-webkit-user-select:text !important;
input{
-webkit-user-select:text !important;
-moz-user-select:text !important;
user-select:text !important;
}

手机端点击阴影问题解决方案 初始化添加 -webkit-tap-highlight-color:rgba(255,255,255,0)

输入框 placeholder 属性颜色问题
/*input的placeholder属性默认颜色改变方法*/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #cccccc;
opacity: 1;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #cccccc;
opacity: 1;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #cccccc;
opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #cccccc !important;
opacity: 1;
}

select默认属性箭头问题
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
/*select标签字体靠右边显示*/
direction: rtl;
/*select标签字体靠左边显示，默认的*/
direction: ltr;

//textarea默认样式清除
resize : none;

//单行省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

//多行省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

//强制折行
word-wrap: break-word;
word-break: break-all;
overflow: hidden;

//内联元素转换
display: inline-block;*display:inline;zoom:1;

//透明度全兼容
opacity: 0.4; /*Chrome、Safari、Firefox、Opera */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6/IE7/8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* IE8 */

filter:alpha(opacity=60); /*支持 IE 浏览器*/
-moz-opacity:0.60; /*支持 FireFox 浏览器*/
opacity:0.60; /*支持 Chrome, Opera, Safari 等浏览器*/

filter:alpha(opacity=50):这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera.
遮罩层：
background-color: #000000;
filter:alpha(opacity=65);
-moz-opacity: 0.65;
-khtml-opacity: 0.65;
opacity: 0.65;

css动画部分属性介绍
-webkit-animation:google 2s ease-out;
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果; ease-in 规定以慢速开始的过渡效果; ease-out 规定以慢速结束的过渡效果; ease-in-out 规定以慢速开始和结束的过渡效果

border1px 移动端适配问题
伪类元素解决
单边线
:after{
content: '';
position: absolute;
left: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
//四边线
:after{
content: '';
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 199.8%;
height: 199.8%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
transform-origin: left top;
}
媒体查询解决不同手机偏移问题（不同的手机倍率下设置不同的尺寸）
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.keepRecord_listBox { border: 0.5px solid #e0e0e0;}
}
背景图片解决办法（图片做一些特殊的处理）

radio 及 checkbox美化（css）
下面以radio为例
<input type="radio" name="whether" id="whether_yes" class="radioClass">
<label for="whether_yes" class="radioClass">是</label>
input[type='radio'].radioClass{
float: left;
width: 13px;
height: 13px;
filter:alpha(Opacity=0);
-moz-opacity: 0;
opacity: 0;
display: inline;
position: absolute;
left: 1px;
top: 1px;
z-index: -5;
}
label.radioClass{
float: left;
height: 25px;
padding: 0 0 0 27px;
font-size: 15px;
line-height: 25px;
text-align: left;
color: #999999;
background: url(../images/cardActivation_img3.png) no-repeat left 4px;
background-size: 17px 17px;
}
input[type='radio'].radioClass:checked + .radioClass{
background: url(../images/cardActivation_img4.png) no-repeat left 4px;
background-size: 17px 17px;
}

在移动端写超出部分显示成滚动条时手指触滑比较僵硬（解决办法是添加 -webkit-overflow-scrolling : touch;）
overflow: hidden;overflow-y:auto;-webkit-overflow-scrolling : touch;

flex布局
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;

justify-content:center; //子元素水平居中
justify-content:flex-end; //子元素水平居右
justify-content:flex-start; //子元素水平居左
justify-content:space-around; //子元素水平平分居中
justify-content:space-between; //子元素水平对齐
align-items:center; //子元素垂直居中

解决图片留白问题
box-sizing: border-box;
display: flex;
flex-direction: column;