兼容性问题汇总
欢迎大家提供在项目过程中遇到的兼容性问题（caijianguo1016@126.com）
浏览器私有属性
Google Chrome, Safari (-webkit)
Firefox (-moz-)
IE (-ms-)
Opera (-o-)
.pic {
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
/*使用 http://pleeease.io/play/ ，CSS 预处理器（Sass，Less，Stylus）或编辑器插件可自动添加浏览器厂商的私有属性前缀。*/
1、input标签在safari下的兼容问题
a）在苹果ios系统safari下，input呈现渐变和圆角状态；
原因：原来iPhone上的safari解析input[type="submit"]和input[type="reset"]按钮会以苹果浏览器的默认UI渲染，苹果一直非常注重用户体验，从苹果系统为中文单独定义了汉字的字体就可以看出来，
所以苹果浏览器对网页元素进行渲染和美化不足为其，只是考虑到是为客户做项目，如果不能保证在各种设备上显示一致的话，是不能被客户所认可的。所以这里需要停止苹果默认对UI渲染。
解决方案：
input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none;} /*去掉苹果的默认UI来渲染按钮*/
b）去掉chrome、safari下， input或textarea在得到焦点时出现黄色边框的方法
input{ outline:0;}
附：去掉chrome、safari下，textarea右下角可拖动鼠标改变textarea大小的方法
textarea{ resize:none;}
2、文字不换行，溢出显示省略号“...”
overflow: hidden;
text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Opera 11 *//*不支持Firefox*/
-o-text-overflow: ellipsis; /* Opera 9-10 */
-moz-binding: url("../xml/ellipsis.xml#ellipsis"); /*firefox通过XUL实现text-overflow:ellipsis的效果，其他参考资料*/
white-space: nowrap; /* 不换行*/
------------------------------------------------------------------------------------------------------------
.xml内容
<?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="ellipsis"> <content> <xul:window> <xul:description crop="end" xbl:inherits="value=xbl:text"> <children/> </xul:description> </xul:window> </content> </binding> </bindings>
多行
p{ width:200px; word-break:break-all;/*自动换行*/ display:-webkit-box;/*盒子模型*/ -webkit-line-clamp:3;/*行数*/ -webkit-box-orient:vertical;/*超过部分用三个...显示*/ overflow:hidden;/*超过隐藏*/ }
css控制英文、中文强制换行与不换行
.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/ .p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/ .p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/ .p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/ .p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/ 注意，一定要指定容器的宽度，不然的话是没有用的。
3、HTML5美化input属性 placeholder（背景提示文字）
对Placeholder的浏览器支持情况
各种浏览器对HTML5/CSS3里出现的新特征、新属性的支持是逐步提高的，最终所有的浏览器都会完全支持HTML5/CSS3，这是毫无疑问 的。目前，对HTML5的placeholder属性支持的浏览器有谷歌浏览器、火狐浏览器、Safari、Opera，还有IE10+。
用CSS美化Placeholder提示信息的样式
CSS3里有相应的通用的对Placeholder提示信息美化的方法。你可以设置提示信息文字的颜色，透明度，背景色等。
为了最大化的兼容所有浏览器，给CSS里的placeholder属性添加浏览器引擎前缀还是有必要的。
- 谷歌浏览器(Webkit): ::-webkit-input-placeholder pseudo-element;
- IE10: :-ms-input-placeholder pseudo-class;
- 火狐浏览器(Gecko18-): :-moz-placeholder pseudo-class;
- 火狐浏览器(Gecko19+): ::-moz-placeholder pseudo-element;
- Opera(Presto): 无。
<form> <input autofocus="autofocus" id="field1" name="fname" placeholder="请输入你的姓名..." type="text"> <input id="field2" name="lname" placeholder="请输入你的昵称..." type="text"> <input id="field3" name="pass" placeholder="请输入你的新密码..." type="password"> <input id="field4" name="pass2" placeholder="请再次输入你的新密码..." type="password"> </form>
/* 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; }
/* 通用 */ ::-webkit-input-placeholder { color:#f00; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f00; } /* ie */ input:-moz-placeholder { color:#f00; } /* webkit专用 */ #field2::-webkit-input-placeholder { color:#00f; } #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* mozilla专用 */ #field2::-moz-placeholder { color:#00f; } #field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
效果：
