摘要：不允許負(fù)值用百分比來定義縮放比例。解決這個(gè)很簡單，在父元素中使用即可解決該。列寬度由單元格內(nèi)容設(shè)定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點(diǎn)點(diǎn)。

html代碼：

第一段文字選中效果
第二段文字選中效果

css代碼：

.p1::selection{background:red;color:#fff;}
.p2::selection{background: black;color:red;}

選中文字后的效果如圖所示：

單行顯示語法：white-space:nowrap;
讓一段文字在固定寬度在一行顯示，最后一個(gè)字符為省略標(biāo)記(...)，css樣式如下

div{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

多行文本最后省略號：

div{
  display: -webkit-box; 
  -webkit-line-clamp:2;
  overflow: hidden; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

這里用到了文本溢出顯示省略號的，即設(shè)置溢出文本顯示為省略標(biāo)記：

語法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;

clip：表示直接裁切溢出的文本；

ellipsis：表示文本溢出時(shí)，顯示省略標(biāo)記(...)，省略標(biāo)記代替最后一個(gè)字符；

ellipsis-word：表示文本溢出時(shí)，也是顯示省略標(biāo)記(...),不同的是，省略標(biāo)記代替的是最后一個(gè)詞)

語法：zoom：normal | |
取值：

normal：使用對象的實(shí)際尺寸。

：用浮點(diǎn)數(shù)來定義縮放比例。不允許負(fù)值

：用百分比來定義縮放比例。不允許負(fù)值

兼容性：

例子：

zoom:normal
zoom:normal

zoom:5
zoom:5

zoom:300%
zoom:300%

        

谷歌與IE瀏覽器結(jié)果如圖所示（Firefox不支持）：

參考地址：http://www.css88.com/book/css/properties/user-interface/zoom.htm

Zoom屬性是IE瀏覽器的專有屬性， 它可以設(shè)置或檢索對象的縮放比例。

在平常的css編寫過程中，zoom:1能夠比較神奇地解決ie下比較奇葩的bug。

譬如外邊距（margin）的重疊，譬如浮動(dòng)的清除，譬如觸發(fā)ie的 haslayout屬性等等。

（重點(diǎn)）當(dāng)設(shè)置了zoom的值之后，所設(shè)置的元素就會(huì)擴(kuò)大或者縮小，高度寬度就會(huì)重新計(jì)算了，這里一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)生重新渲染，運(yùn)用這個(gè)原理，也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問題。

ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問題，使用下面的CSS寫法：

.父元素 {   overflow: auto; zoom: 1   }

產(chǎn)生原因：
當(dāng)父元素的直接子元素或者下級子元素的樣式擁有position:relative 屬性時(shí)，父元素的overflow:hidden 屬性就會(huì)失效。

解決辦法：
我們在IE 6、7 內(nèi)發(fā)現(xiàn)子元素會(huì)超出父元素設(shè)定的高度，即使父元素設(shè)置了overflow:hidden。
解決這個(gè)bug很簡單，在父元素中使用 *position:relative; 即可解決該bug。

table{table-layout:fixed;}

語法：table-layout:automatic | fixed | inherit

automatic：默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。

fixed：列寬由表格寬度和列寬度設(shè)定。

inherit：規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。

table{border-collapse:collapse;}

語法：border-collapse:separate | collapse | inherit

separate：默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略 border-spacing 和 empty-cells 屬性。

collapse：如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性。

inherit：規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值。

例如：

table{border-collapse:collapse;}
table, td, th{border:1px solid black;}

描述：text-transform 屬性控制文本的大小寫。

語法：text-transform:none | capitalize | uppercase | lowercase | inherit

none 默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。

capitalize 文本中的每個(gè)單詞以大寫字母開頭。

uppercase 定義僅有大寫字母。

lowercase 定義無大寫字母，僅有小寫字母。

inherit 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。

[ text-stroke-width ]：設(shè)置或檢索對象中的文字的描邊厚度
[ text-stroke-color ]：設(shè)置或檢索對象中的文字的描邊顏色

text-stroke(文本描邊)和text-fill-color(文本填充色)注意點(diǎn)：

目前這兩個(gè)屬性只有webkit內(nèi)核的Safari和Chrome支持，例如：

.box{-webkit-text-stroke: 3.3px #2A75BF;}

text-fill-color：顏色值，和color屬性差不多都是文字的樣式；

注意：同時(shí)使用text-fill-color和color屬性，text-fill-color將覆蓋color屬性的顏色值；

text-fill-color可以使用透明值，即：text-fill-color：transparent

.box{text-shadow:0px 0px 0px #333333;}

屬性值依次：水平方向位移（支持負(fù)值）、垂直方向位移（支持負(fù)值）、模糊半徑、陰影顏色
text-shadow對同一個(gè)text，可設(shè)置多個(gè)陰影，與box-shadow類似，使用逗號","分割，前一個(gè)設(shè)置效果在后一個(gè)設(shè)置效果之上。
box-shadow 參考：http://www.cnblogs.com/lhb25/...

為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本，在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時(shí)，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。全面的寫法：

.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左邊陰影*/  
    10px 0 10px yellow, /*右邊陰影*/  
    0 -10px 10px blue, /*頂部陰影*/  
    0 10px 10px green; /*底邊陰影*/  
} 

參考地址：http://blog.csdn.net/freshlov...

letter-spacing 屬性增加或減少字符間的空白（字符間距）。
例如： letter-spacing: 2px;

div{filter: alpha(opacity=80);opacity:0.8;}

1.用css中的type選擇器

input[type="text"]{ background-color:#FFC;}

2.用css的expression判斷表達(dá)式

input{ background-color:expression(this.type=="text"?"#FFC":"");}

3.用javascript腳本實(shí)現(xiàn)(覺得沒必要，省略...)

@font-face{
    font-family: myFirstFont;
    src: url("Sansation_Light.ttf"),
        url("Sansation_Light.eot"); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

font-family:"YourWebFontName";
src:url("YourWebFontName.eot"); /* IE9 Compat Modes */
src:url("YourWebFontName.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("YourWebFontName.woff") format("woff"), /* Modern Browsers */
    url("YourWebFontName.ttf")  format("truetype"), /* Safari, Android, iOS */
    url("YourWebFontName.svg#YourWebFontName") format("svg"); /* Legacy iOS */}

參考地址：《css學(xué)習(xí)筆記 - 網(wǎng)頁中導(dǎo)入特殊字體@font-face屬性詳解》

div{
  word-break:break-all; /*支持IE，chrome，F(xiàn)F不支持*/
  word-wrap:break-word;/*支持IE，chrome，F(xiàn)F*/
}

:nth-child(2)選取第幾個(gè)標(biāo)簽，“2可以是你想要的數(shù)字”
:nth-child(2n)選取偶數(shù)標(biāo)簽，2n也可以是even
:nth-child(2n-1)選取奇數(shù)標(biāo)簽，2n-1可以是odd
:nth-child(3n+1)自定義選取標(biāo)簽，3n+1表示“隔二取一”

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

第一個(gè)參數(shù)：設(shè)置漸變的起始位置
第二個(gè)參數(shù)：設(shè)置起始位置的顏色
第三個(gè)參數(shù)：設(shè)置終止位置的顏色

IE 瀏覽器
IE瀏覽器實(shí)現(xiàn)漸變只能使用IE自己的濾鏡去實(shí)現(xiàn)

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一個(gè)參數(shù)：漸變起始位置的顏色
第二個(gè)參數(shù)：漸變終止位置的顏色
第三個(gè)參數(shù)：漸變的類型
0 代表豎向漸變 1 代表橫向漸變

其中RGB顏色的原理是通過定義不同的紅綠藍(lán)色值來組成一個(gè)顏色。color:rgb(254,2,8);
其中HSL是通過色相、飽和度、亮度模式來申明顏色的。color:hsl(359,99%,40%);

如果需要設(shè)置透明背景 則可以用到他們：

background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不會(huì)。
background-color:rgba(0,0,0,0.5)，此寫法解決opacity帶來的元素也透明問題，但I(xiàn)E8低版本瀏覽器不支持。

em,u{font-style: normal;}

一般寫法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

應(yīng)該有人會(huì)發(fā)現(xiàn)上面這段代碼里面有個(gè)screen，他的意思是在告知設(shè)備在打印頁面時(shí)使用襯線字體，在屏幕上顯示時(shí)用無襯線字體。但是目前我發(fā)現(xiàn)很多網(wǎng)站都會(huì)直接省略screen,因?yàn)槟愕木W(wǎng)站可能不需要考慮用戶去打印時(shí)，你可以直接這樣寫：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

其中css2的媒體查詢：

我們想知道移動(dòng)設(shè)備是不是縱向放置的顯示屏，可以這樣寫：

我們把第一段的代碼也用CSS2來實(shí)現(xiàn)，讓它一樣可以讓頁面寬度小于960的執(zhí)行指定的樣式文件：

但是上面這個(gè)方法，最大的弊端是他會(huì)增加頁面http的請求次數(shù)，增加了頁面負(fù)擔(dān)，我們用CSS3把樣式都寫在一個(gè)文件里面才是最佳的方法。

下面的寫法是實(shí)現(xiàn)尺寸等于480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
  /*自己添加的樣式*/
}

其中對于-webkit-min-device-pixel-ratio作如下解釋：

-webkit-min-device-pixel-ratio為1.0

所有非Retina的Mac

所有非Retina的iOS設(shè)備

Acer Iconia A500

Samsung Galaxy Tab 10.1

Samsung Galaxy S

-webkit-min-device-pixel-ratio為1.3

Google Nexus 7

-webkit-min-device-pixel-ratio為1.5

Google Nexus S

Samsung Galaxy S II

HTC Desire

HTC Desire HD

HTC Incredible S

HTC Velocity

HTC Sensation

-webkit-min-device-pixel-ratio為2.0

iPhone 4

iPhone 4S

iPhone 5

iPad (3rd generation)

iPad 4

所有Retina displays 的MAC

Google Galaxy Nexus

Google Nexus 4

Google Nexus 10

Samsung Galaxy S III

Samsung Galaxy Note II

Sony Xperia S

HTC One X

div{
  position:absolute;
  left:50%;
  bottom:0;
  margin-left:-10px;
  width:0;
  height:0; 
  border-width:10px;
  border-style:solid dashed dashed dashed;
  border-color:transparent transparent #71151c transparent;
}

div{
  display: box; 
  display: -webkit-box; 
  display: -moz-box; 
  -webkit-box-pack:center; 
  -moz-box-pack:center; 
  -webkit-box-align:center; 
  -moz-box-align:center; 
}

-webkit-filter是css3的一個(gè)屬性，Webkit率先支持了這幾個(gè)功能，感覺效果很不錯(cuò)。下面咱們就學(xué)習(xí)一下filter這個(gè)屬性吧。

現(xiàn)在規(guī)范中支持的效果有：

grayscale 灰度 值為0-1之間的小數(shù)

sepia 褐色　　　　　　 值為0-1之間的小數(shù)

saturate 飽和度　　　　 值為num

hue-rotate 色相旋轉(zhuǎn)　　值為angle

invert 反色　　　　　　 值為0-1之間的小數(shù)

opacity 透明度　　　　　值為0-1之間的小數(shù)

brightness 亮度　　　　 值為0-1之間的小數(shù)

contrast 對比度　　　　 值為num

blur 模糊　　　　　　 值為length

drop-shadow 陰影

用法是標(biāo)準(zhǔn)的CSS寫法，如：

-webkit-filter: blur(2px);

使用方法：（配合動(dòng)畫使用）

.jaguar-con-show img.jaguar-con-imglast{               
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}
.jaguar-con-show img.jaguar-con-imglast{   
    -webkit-filter: blur(3px) brightness(.6);
    -moz-filter: blur(3px) brightness(.6);
    -o-filter: blur(3px) brightness(.6);
    -ms-filter: blur(3px) brightness(.6);    
    filter: blur(3px) brightness(.5); 
    -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    /*border: 3px solid #000;*/
}

pointer-events原本來源于SVG，目前在很多瀏覽器中已經(jīng)得到體現(xiàn)。不過，要讓任何HTML元素生效還得借助于一點(diǎn)點(diǎn)css。該屬性稱之為pointer-events，基本上可以將它設(shè)置為auto，這是正常的行為，而“none”是一個(gè)有趣的屬性。
如果你已經(jīng)設(shè)置一個(gè)元素的css屬性為pointer-events: none。它將不會(huì)捕獲任何click事件，而是讓事件穿過該元素到達(dá)下面的元素.

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個(gè)CSS3屬性，IE6/7/8/9都不支持，Opera在SVG中支持該屬性但是HTML中不支持。

pointer-events:none禁止掉鼠標(biāo)事件（css3屬性）
禁止button按鈕的點(diǎn)擊：

默認(rèn)按鈕
禁用按鈕

button禁止點(diǎn)擊的樣式：

button{cursor: not-allowed;}

所以button用到了disabled="disabled"與樣式cursor: not-allowed

禁止a標(biāo)簽的跳轉(zhuǎn)行為：

鏈接
禁用鏈接

樣式：

a{pointer-events: none;cursor:not-allowed}

參考地址：http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate
但是用到鍵盤tab鍵的時(shí)候出現(xiàn)a標(biāo)簽可以跳轉(zhuǎn)，實(shí)現(xiàn)鍵盤tab也禁止a標(biāo)簽跳轉(zhuǎn) 參考地：
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

首字母大寫：text-transform:capitalize
全部大寫：text-transform:uppercase
全部小寫：text-transform:lowercasecase

this is a test!!!
首字母大寫
全部大寫
全部小寫

a.直接填寫title內(nèi)容時(shí)候“回車鍵”換行
b.使用html title換行代碼
使用代碼換行共兩種代碼，均可實(shí)現(xiàn)html標(biāo)簽內(nèi)title內(nèi)容顯示時(shí)換行。
換行代碼符合分別為：
“ ”和“ ”
“ ”拼寫：&（and符號，鍵盤數(shù)字鍵7一起&）+ #（井號）+ 10（阿拉伯?dāng)?shù)字十）+ ;（小寫分號）
“ ”拼寫：&（and符號，鍵盤數(shù)字鍵7一起&）+ #（井號）+ 13（阿拉伯?dāng)?shù)字十三）+ ;（小寫分號）
以上符合數(shù)字輸入均必須英文半角模式輸入。使用時(shí)候，在需要換行地方任選一種（組）換行符號代碼即可。

例如：

那么解決辦法：給文字區(qū)外面的div設(shè)最大高度100%。

input file控件限制上傳文件類型
文件類型中間用，分開
html和htm這樣的要寫成兩個(gè)

如果限制上傳文件為圖片類型，如下：

input:focus{outline: none;}

傳統(tǒng)的實(shí)現(xiàn)方式：

body { overflow-y: scroll; }

css3實(shí)現(xiàn)方式：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創(chuàng)建一個(gè)（使用主體也是可以實(shí)現(xiàn)類似效果，不過本著寬度分離原則，不推薦）；
然后，calc是CSS3中的計(jì)算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最后，100vw相對于瀏覽器的window.innerWidth，是瀏覽器的內(nèi)部寬度，注意，滾動(dòng)條寬度也計(jì)算在內(nèi)！而100%是可用寬度，是不含滾動(dòng)條的寬度。
于是，calc(100vw - 100%)就是瀏覽器滾動(dòng)條的寬度大小（如果有，如果沒有滾動(dòng)條則是0）！左右都有一個(gè)滾動(dòng)條寬度（或都是0）被占用，主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器啦，從而沒有任何跳動(dòng)！

參考地址：http://www.zhangxinxu.com/wor...

***以下內(nèi)容將主要是在移動(dòng)端使用的多***

viewport模板 - target-densitydpi=device-dpi，android 2.3.5以下版本不支持

自己做移動(dòng)端活動(dòng)的時(shí)候常如下方式：

中文字體使用系統(tǒng)默認(rèn)即可，英文用Helvetica，為什么呢，首先先看一下各平臺(tái)的主流字體支持情況（來源網(wǎng)絡(luò)，沒有驗(yàn)證）?。?！

各系統(tǒng)的默認(rèn)字體和常用字體：
（表格稍后補(bǔ)上）
需要詳細(xì)相關(guān)信息，可查看《兼容PC手機(jī)端字體》文章

結(jié)論

各個(gè)手機(jī)系統(tǒng)有自己的默認(rèn)字體，且都不支持微軟雅黑

如無特殊需求，手機(jī)端無需定義中文字體，使用系統(tǒng)默認(rèn)

英文字體和數(shù)字字體可使用 Helvetica ，三種系統(tǒng)都支持

代碼：

/* 移動(dòng)端定義字體的代碼 */
body{font-family:Helvetica;}

當(dāng)用戶手指放在移動(dòng)設(shè)備在屏幕上滑動(dòng)會(huì)觸發(fā)的touch事件

以下支持webkit

touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指

touchmove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們再滑屏頁面，會(huì)調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動(dòng)

touchend——當(dāng)手指離開屏幕時(shí)觸發(fā)

touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過程中突然頁面alert()一個(gè)提示框，此時(shí)會(huì)觸發(fā)該事件，這個(gè)事件比較少用

TouchEvent

touches：屏幕上所有手指的信息

targetTouches：手指在目標(biāo)區(qū)域的手指信息

changedTouches：最近一次觸發(fā)該事件的手指信息

touchend時(shí)，touches與targetTouches信息會(huì)被刪除，changedTouches保存的最后一次的信息，最好用于計(jì)算手指信息

參數(shù)信息(changedTouches[0])

clientX、clientY在顯示區(qū)的坐標(biāo)

target：當(dāng)前元素

以下支持winphone 8

MSPointerDown——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指

MSPointerMove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們再滑屏頁面，會(huì)調(diào)用css的html{-ms-touch-action:
none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動(dòng)

MSPointerUp——當(dāng)手指離開屏幕時(shí)觸發(fā)

歷史原因：

2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機(jī)端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機(jī)上用瀏覽器打開一個(gè)PC上的網(wǎng)頁，你可能在看到頁面內(nèi)容雖然可以撐滿整個(gè)屏幕，但是字體、圖片都很小看不清，此時(shí)可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。

雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次，iOS 自帶的 Safari 瀏覽器會(huì)將網(wǎng)頁縮放至原始比例。

原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個(gè)元素時(shí)候，例如跳轉(zhuǎn)鏈接，此處瀏覽器會(huì)先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以，捕獲第一次單擊后，瀏覽器會(huì)先Hold一段時(shí)間t，如果在t時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會(huì)做單擊跳轉(zhuǎn)鏈接的處理，如果t時(shí)間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會(huì)禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn)行對該部分區(qū)域頁面的縮放操作。那么這個(gè)時(shí)間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時(shí)間才響應(yīng)，給用戶慢體驗(yàn)感覺，對于web開發(fā)者來說是，頁面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。

解決方案：

fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲，地址：https://github.com/ftlabs/fas...

zepto的touch模塊，tap事件也是為了解決在click的延遲問題

1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick

解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應(yīng)

.css{-webkit-appearance:none;}

偽元素改變number類型input框的默認(rèn)樣式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

手機(jī)對Placeholder提示信息都基本帶有默認(rèn)的樣式，兼容各種瀏覽器的使用方式：

.css::-webkit-input-placeholder {color: #777;}    /* WebKit browsers */
.css:-moz-placeholder {color: #777;opacity: 1;}   /* Mozilla Firefox 4 to 18 */
.css::-moz-placeholder {color: #777;opacity: 1;}  /* Mozilla Firefox 19+ */
.css:-ms-input-placeholder {color: #777;}         /* Internet Explorer 10+ */

ios可以，android不行~

在textarea標(biāo)簽下都可以換行~

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

-webkit-tap-highlight-color :當(dāng)用戶點(diǎn)擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點(diǎn)擊的元素時(shí)，覆蓋顯示的高亮顏色。

該屬性可以只設(shè)置透明度。如果未設(shè)置透明度，iOS Safari使用默認(rèn)的透明度。當(dāng)透明度設(shè)為0，則會(huì)禁用此屬性；當(dāng)透明度設(shè)為1，元素在點(diǎn)擊時(shí)不可見。

詳細(xì)參考：《-webkit-tap-highlight-color》

ios使用-webkit-text-size-adjust禁止調(diào)整字體大小:

body{-webkit-text-size-adjust: 100%!important;}

text-size-adjust 設(shè)為 none 或者 100% 關(guān)閉字體大小自動(dòng)調(diào)整功能。

android使用以下代碼，該接口只在微信瀏覽器下有效:

/**
 * 頁面加入這段代碼可使Android機(jī)器頁面不再受到用戶字體縮放強(qiáng)制改變大小
 * 但是會(huì)有一個(gè)1秒左右的延遲，期間可以考慮通過loading展示
 * 僅供參考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke("setFontSizeCallback",{"fontSize":0}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke("setFontSizeCallback",{"fontSize":0}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();

.css{-webkit-touch-callout: none}

-webkit-touch-callout 是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。

當(dāng)你觸摸并按住觸摸目標(biāo)時(shí)候，禁止或顯示系統(tǒng)默認(rèn)菜單。在iOS上，當(dāng)你觸摸并按住觸摸的目標(biāo)，比如一個(gè)鏈接，Safari瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認(rèn)菜單。這個(gè)屬性可以讓你禁用系統(tǒng)默認(rèn)菜單。

適用于：鏈接元素比如新窗口打開，img元素比如保存圖像等等
取值：

none：系統(tǒng)默認(rèn)菜單被禁用

inherit：系統(tǒng)默認(rèn)菜單不被禁用

詳細(xì)參考：《-webkit-touch-callout》

.css{-webkit-user-select:none}

當(dāng)然pc端現(xiàn)在也在用禁止用戶選中文字，兼容寫法：

.test{
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
}

當(dāng)然有時(shí)候pc上也直接寫到html代碼中，如：

選擇我試試，你會(huì)發(fā)現(xiàn)怎么也選擇不到我，哈哈哈哈

代碼解釋：

IE6-9不支持該屬性，但支持使用標(biāo)簽屬性 onselectstart="return false;" 來達(dá)到
user-select:none 的效果；Safari和Chrome也支持該標(biāo)簽屬性；

直到Opera12.5仍然不支持該屬性，但和IE6-9一樣，也支持使用私有的標(biāo)簽屬性 unselectable="on" 來達(dá)到user-select:none 的效果；unselectable 的另一個(gè)值是 off；

除Chrome和Safari外，在其它瀏覽器中，如果將文本設(shè)置為
-ms-user-select:none;，則用戶將無法在該文本塊中開始選擇文本。不過，如果用戶在頁面的其他區(qū)域開始選擇文本，則用戶仍然可以繼續(xù)選擇將文本設(shè)置為
-ms-user-select:none; 的區(qū)域文本；

對應(yīng)的腳本特性為userSelect。

打電話：打電話給:0755-10086
發(fā)短信：winphone系統(tǒng)無效，發(fā)短信給: 10086
發(fā)郵件：[email protected]

詳細(xì)了解mailTo：移動(dòng)web頁面給用戶發(fā)送郵件的方法 (郵件含文本、圖片、鏈接)

移動(dòng)端觸摸按鈕的效果，可明示用戶有些事情正要發(fā)生，是一個(gè)比較好體驗(yàn)，但是移動(dòng)設(shè)備中并沒有鼠標(biāo)指針，使用css的hover并不能滿足我們的需求，還好國外有個(gè)激活移動(dòng)端css的active效果。

直接在body上添加ontouchstart，同樣可激活移動(dòng)端css的active效果，比較推薦這種方式，代碼如下：

html代碼：

css代碼：

.btn:active{background-color: red;}

解決頁面閃白，保證動(dòng)畫流暢

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

input::-webkit-input-speech-button {display: none}

winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無效的

目前解決方法是使用樣式來禁用

html{-ms-touch-action: none;}/* 禁止winphone默認(rèn)觸摸事件 */

window.orientation，取值：正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式；

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("橫屏:" + window.orientation);
        case 0:
        case 180:
        alert("豎屏:" + window.orientation);
        break;
    }
} 

樣式：

//豎屏?xí)r使用的樣式
@media all and (orientation:portrait) {
.css{}
}

//橫屏?xí)r使用的樣式
@media all and (orientation:landscape) {
.css{}
} 

禁用 select 默認(rèn)下拉箭頭

::-ms-expand 適用于表單選擇控件下拉箭頭的修改，有多個(gè)屬性值，設(shè)置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。

select::-ms-expand {
    display: none;
}

禁用 radio 和 checkbox 默認(rèn)樣式

::-ms-check 適用于表單復(fù)選框或單選按鈕默認(rèn)圖標(biāo)的修改，同樣有多個(gè)屬性值，設(shè)置它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
    display: none;
}

禁用PC端表單輸入框默認(rèn)清除按鈕

當(dāng)表單文本輸入框輸入內(nèi)容后會(huì)顯示文本清除按鈕，::-ms-clear 適用于該清除按鈕的修改，同樣設(shè)置使它隱藏 (display:none) 并使用背景圖片來修飾可得到我們想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
    display: none;
}

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)

在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍

那么，前端的應(yīng)對方案是：

設(shè)計(jì)稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2

//例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px

.css{font-size:20px}

/* 設(shè)置滾動(dòng)條的樣式 */
::-webkit-scrollbar {
  width:12px;
}
/* 滾動(dòng)槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  border-radius:10px;
}
/* 滾動(dòng)條滑塊 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(255,0,0,0.4);
}

首先設(shè)置：

div{height:100%;overflow-y:auto;}

但是實(shí)際在 iPhone 上測試時(shí)，發(fā)現(xiàn) Safari（也包括很多 iOS App 內(nèi)置瀏覽器使用的 UIWebView）竟然完全禁用掉了著名的「慣性滾動(dòng)」效果。

但解決方法是有的，令人吃驚的是還非常簡單：只有一條 CSS 屬性即可解決問題：

body{-webkit-overflow-scrolling:touch;}

有的同學(xué)添加了這一條屬性后遇到了向下滑動(dòng)后頁面變成空白的問題，實(shí)際上可以通過一條 CSS 屬性把頁面加載到內(nèi)存來解決：

body{-webkit-transform:translate3d(0,0,0);}

注：如果設(shè)置了-webkit-overflow-scrolling: touch;那么在IOS系統(tǒng)下對于改變滾動(dòng)條的默認(rèn)樣式將失效，即上面一條所述。

div{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

htm代碼：

css代碼：

nav{display:-webkit-flex;display:flex;}
a{-webkit-flex:1;flex:1;}

更新于2017.06.02，逐步更新中...