tips：pc初始化,ie兼容,手机兼容 问题汇总

————————-PC兼容初始化—————–

1. 去除浏览器或者手机自带的样式
   Q:自带元素的样式，太丑了，想去掉
   A:-webkit-appearance :none ;

2. 页面的高度得不到100%
   A:需要设置html，body的高度均为100%
   html,body{
   width:100%;
   height:100%;
   }

3. 输入框内文字的光标显示不统一的，有的为文字大小，有的为行高
   A:设置padding:top=bottom ,模拟实现垂直居中的光标

4. cke-editor 在ie下不支持复制粘贴
   （由javascript编写的富文本网页编辑器，它可以填写文字、插入图片、视频、Excel等富媒体信息，也可以在源码方式下填写内容，在各个网站中应用非常广泛）
   A:打开IE，点击“工具”菜单，选择“兼容性视图设置”，勾选“在兼容性视图中显示所有网站”选项即可。

5. input type=file 自定义样式
   A:通过绝对定位，覆盖原来的样式，并且用父标签触发事件，opacity: 0 ; /* 实现的关键点 /
   filter:alpha(opacity= 0); / 兼容IE */；其中js获取文件相关信息：
   οnchange=uploadfile(this.value);
   var filestr=filename;
   var pos=filestr.lastIndexOf(“\”);

6. 输入框的蓝边以及输入提示的底色黄色
   1 蓝边 ：outline:none ;
   2 黄底 ：input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

7. 输入框的提示文字的颜色可以修改么

A: 代码如下，颜色、行高、大小等都可以修改。
::-webkit-input-placeholder{}
/* WebKit browsers */
::-webkit-input-placeholder { color: #777; } 
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { color: #777; opacity: 1; } 
/* Mozilla Firefox 19+ */
::-moz-placeholder { color: #777; opacity: 1; } 
/* Internet Explorer 10+ */
:-ms-input-placeholder { color: #777; }

8.习惯性的写最小高度，如何处理兼容问题？

A: 代码如下，可以放心的使用，建议写到混合函数mixin中。如果你不考虑低版本浏览器和ie，直接用min-height即可。

/*最小高度兼容代码*/
min-height: 500px;
height:auto !important ;
height: 500px;
overflow: visible;

,9. 文本域（textarea）右下角的可控区域是什么？如何去掉
resize: none;

,10. 英文以及数字不换行，导致超出显示

`word-break: break-all; 详细的可以自己去了解。
额外补充：white-space:nowrap ;不换行`

,11. 鼠标指针变成红色的警告

cursor: not-allowed;

————————-ie兼容bug汇总—————–

,1. ie6屏幕固定位置实现

body{
background-image:url(about:blank); background-attachment:fixed;/*必要，防抖动*/
}
.head{
position:fixed;
top:0;
left:0;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
}
_bottom:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

,2. 浮动双倍间距
display:inline

,3. 透明图片的处理

//ie7 支持透明图片等，下面的做法可以尝试。
width:25px;height:35px;
               background:url(/images/hoseditsym.png) no-repeat !important;background-position:left center!important;
                _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src ='/images/hoseditsym.png');
                _background-image: none;
                FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src ='/images/hoseditsym.png')

,4.文档渲染模式设置
Q: 有些页面现代浏览器正确，但有些样式被ie解析错误，可以尝试下修改文档的渲染模式
A:代码如下：针对360的兼容模式，可以加特殊的meta标记renderer

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">

,5.ie不支持placeholder
Q: 如题，测试希望ie也能支持placeholder
A:引入插件，注意的是针对ie写条件注释引入，另外如果不要求做这部分，可以不写。
参考：github地址，修改样式可以直接修改，文件可以通过bower加载。

<script type="text/javascript" src="jquery.placeholder.min.js"></script>.placeholder { color: #aaa; }
<style>
.placeholder { color: #aaa; }
</style>
 <script type="text/javascript">
    $(function(){ $('input, textarea').placeholder(); });
 </script>

,6.设置透明（容器内容不想被透明）
Q:opacity与rgba
A:两者皆可以调整我们想要的块（区域）的透明度，然而这两个属性又有所不同，opacity调整了整个区域的透明度（包含区域内的内容），rgba则可调整区域背景的透明度。所以当我们想做一个透明的按钮时可以选择后者。
两者的用法：opacity: 0.5； rgba(255,255,255,0.5)

/*透明度 兼容写法*/
background: rgba(244 ,219, 187, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#99F4DBBB , endColorstr=#99F4DBBB );

————————-手机兼容bug汇总—————–

1. 点击样式闪动
   Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

   A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：
   div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}；
   另外出现蓝色边框：outline:none；

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
-webkit-tap-highlight-color : transparent ;  // i.e . Nexus5/Chrome and Kindle Fire HD 7 ''

1. 屏蔽用户选择
   Q: 禁止用户选择页面中的文字或者图片
   A:代码如下

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

，3. 判断横屏竖屏

/*css判断横屏 竖屏*/
@media screen and (orientation: portrait) {
  /*竖屏 css*/
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

，4.判断手机端还是PC端

function isMobile() {
var sUserAgent = navigator.userAgent.toLowerCase(), bIsIpad = sUserAgent
.match(/ipad/i) == "ipad", bIsIphoneOs = sUserAgent
.match(/iphone os/i) == "iphone os", bIsMidp = sUserAgent
.match(/midp/i) == "midp", bIsUc7 = sUserAgent
.match(/rv:1.2.3.4/i) == "rv:1.2.3.4", bIsUc = sUserAgent
.match(/ucweb/i) == "ucweb", bIsAndroid = sUserAgent
.match(/android/i) == "android", bIsCE = sUserAgent
.match(/windows ce/i) == "windows ce", bIsWM = sUserAgent
.match(/windows mobile/i) == "windows mobile", bIsWebview = sUserAgent
.match(/webview/i) == "webview";
return (bIsIpad || bIsIphoneOs);
}