兼容性問題彙總

歡迎你們提供在項目過程當中遇到的兼容性問題（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）或編輯器插件可自動添加瀏覽器廠商的私有屬性前綴。*/

　　

一、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;}
二、文字不換行，溢出顯示省略號「...」

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;}／/*不換行，超出部分隱藏且以省略號形式出現*/
注意，必定要指定容器的寬度，否則的話是沒有用的。

 

三、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; }

效果：