兼容性问题汇总

欢迎大家提供在项目过程中遇到的兼容性问题（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; }

效果：

兼容性问题汇总

浏览器私有属性

推荐阅读