HTML和CSS中的小坑需注意

標籤：style   blog   http   color   使用   ar   strong   for   2014   

iphone6發布，新一輪移動端的適配又要開始了，小夥伴們紛紛

言歸正傳，瀏覽器版本的更新加上技術的發展導致一些我們用到的屬性突然失效或者出現意想不到的事情，今天就說那麼幾個我遇到的

One：-webkit-text-size-adjust:none/100%

這個屬性是用來解決chrome下無法設定字型小於12px的，但PC端chrome27的時候停止了對其的支援，所以以前設定的在現在就無效了，不過移動端還是可以使用的，親測三星蓋世內建的安卓瀏覽器和iphone的safari還是支援這個屬性，大家可以安心用之，至於它取值none/100%的差異性大家可以參考http://www.document-write.com/html/xhtml-css/42.html，那麼大家會問PC端如果我要chrome下設定小於12px咋個辦呢？你可以使用css3屬性transform:scale()或者zoom（這兩個有局限性和相容性的問題，下面我會講到），當然你可以使用圖片。。。

Two：transform:scale()和zoom

上面兩個屬性都有縮放和放大的功能，一個是css3的屬性，一個是IE的私人屬性，但chrome和safari也支援（其餘webkit核心沒測，不過應該也是有效），firefox是不支援的。前一個是不支援內嵌元素的而且它是在在不改變元素在文檔流中所佔空間的前提下，對元素的顯示進行放大或縮小，所以他有可能導致相鄰元素覆蓋，不過transform:scale()可以用來解決移動端響應地區小的問題，這個我就不詳述了。zoom是對所有元素都有效，而且zoom的放大縮小是不會出現相鄰元素覆蓋的問題，看栗子http://jsbin.com/hogete/2/（請在chrome下開啟）。如果相鄰兩個元素有一定的左右margin，而且他們的父元素寬度是固定的（本來是1180px，響應式時變成980px），用了transform:scale()你就要改變他們的margin值，而zoom就不用，詳情前看攜程的一個執行個體http://huodong.ctrip.com/的部分，請分別用firefox和chrome查看縮小視窗與未縮小之前代碼的區別。

博主表達能力有限，如有不當或疑問還請輕噴。

Three：HTML5中的placeholder

HTML5的發展，我們用H5的東西也越來越多，input文字框或是textarea文本域都支援placeholder，但當我們想改變placeholder預設常值內容的顏色時怎麼辦呢，各家瀏覽器都是不同的。webkit核心的需要這樣-webkit-input-placeholder { color:#F00; }，firefox是input:-moz-placeholder { color: #F00;}，不過19及以上版本的firefox是這樣input::-moz-placeholder { color: #F00; opacity:1;}，為啥呢，因為firefox瀏覽器預設樣式改變了它的透明度IE就是這樣（10及以上才支援）input:-ms-input-placeholder { color: #F00 ; }，當然你也可以用js來解決這種繁瑣的相容性問題。

博主吃飯去了，剩下的一個下一篇吧，大家愉快度周末。。。

HTML和CSS中的小坑需注意