資源描述：
《解決css兼容性問題》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在教育資源-天天文庫。
1、解決CSS兼容性問題如果你經(jīng)常使用CSS3實現(xiàn)一些炫酷的效果，比如使用transition實現(xiàn)讓一個div慢慢變寬的動效，你一定會為了兼容各個高級瀏覽器而這樣寫你的CSS代碼：1.#box{2.width:200px;3.height:200px;4.-moz-transition:all2sease0s;5.-webkit-transition:all2sease0s;6.-o-transition:all2sease0s;7.}8.#box:hover{9.width:800px;10.}復制代碼在InternetExplo
2、rer10上你也可以使用CSS3實現(xiàn)這個效果了，只需要為#box添加一行代碼：-ms-transition:all2sease0s;下面列舉出幾個典型的需要兼容InternetExplorer10的CSS3特性：1.3D轉(zhuǎn)換InternetExplorer10和Windows8中使用JavaScript的ModernUI風格的應用引入了對CSS33D轉(zhuǎn)換的支持。InternetExplorer9增加了對CSS32D轉(zhuǎn)換的支持，使用JavaScript的ModernUI風格的應用也同樣支持它們。轉(zhuǎn)換支持包括變換、旋轉(zhuǎn)以及2D和3D
3、空間中的元素拉伸，這些轉(zhuǎn)換無需插件。為了實現(xiàn)CSS轉(zhuǎn)換，需要使用-ms-transform屬性定義一個或多個轉(zhuǎn)換函數(shù)。例如，以下代碼段是一個選擇器，它將一個2D偏移函數(shù)和一個3D旋轉(zhuǎn)函數(shù)同時應用于一個div元素。1.div{2....3.-ms-transform:skew(-45deg,15deg)rotate3d(0.7,0.8,0.4,55deg);4.}復制代碼這將得到以下圖像：2012-10-2513:30上傳下載附件(184.6KB)關于CSS33D轉(zhuǎn)換、轉(zhuǎn)換函數(shù)以及如何實現(xiàn)它們的更多信息，請參閱：“3-D轉(zhuǎn)換”（h
4、ttp://go.microsoft.com/fwlink/p/?LinkId=238295）。關于CSS33D轉(zhuǎn)換的實際操作，請訪問IETestDrive（http://go.microsoft.com/fwlink/p/?LinkID=196941）站點上的“動手實驗：3D轉(zhuǎn)換”（http://go.microsoft.com/fwlink/p/?LinkId=227893）。2.過渡InternetExplorer10和使用JavaScript的ModernUI風格的應用支持CSS3過渡特效。通過過渡特效，可以實現(xiàn)簡單的動
5、畫效果，在一小段時間內(nèi)平滑地改變CSS的屬性值。例如，在10秒鐘內(nèi)改變一個對象的大小和顏色。以前需要通過CSS和JavaScript的復雜組合操作實現(xiàn)的效果，現(xiàn)在只需幾行CSS代碼即可完成。關于CSS3過渡的實際操作演示，請參見IETestDrive（http://go.microsoft.com/fwlink/p/?LinkID=196941）站點上的“動手實驗：過渡”（http://go.microsoft.com/fwlink/p/?LinkId=227781）。以下是一個完整的簡單CSS過渡的示例，關于這個示例的更全面的
6、解釋，以及所有過渡屬性，請參見“過渡”（http://go.microsoft.com/fwlink/p/?LinkId=238302）。1.2.3.4.5.body{6.padding:10px;7.font:bold20pt"SegoeUI";8.}9.div{10.width:250px;11.background-color:lime;12.padding:10px;13.opacity:1;14.-m
7、s-transition:opacity5slinear1s;1.}2.div:active{3.opacity:0;4.}5.6.7.
8.
9.Duisacleositametlectustristiquepulvinarnecrutrumdolor.10.Etiamsedipsumenim,vitaeeuismododio.Suspendisseeu.11.
12.13.
