PhoneGap中文网

标题: css3 兼容不同浏览器样式怎么写 [打印本页]
作者: admin    时间: 2013-7-19 17:55
标题: css3 兼容不同浏览器样式怎么写

css兼容不同浏览器其实很简单

比如 html5里面  transform:rotate(30deg); 这个写法  要兼容不同的浏览器直接在这个前面加上不同浏览器的标识，如下

-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox  火狐浏览器*/
-webkit-transform:rotate(30deg); /* Safari and Chrome  浏览器*/
-o-transform:rotate(30deg); /* Opera  浏览器*/


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. width:100px;
  8. height:75px;
  9. background-color:yellow;
  10. border:1px solid black;
  11. }
  12. div#div2
  13. {
  14. transform:rotate(30deg);
  15. -ms-transform:rotate(30deg); /* IE 9 */
  16. -moz-transform:rotate(30deg); /* Firefox */
  17. -webkit-transform:rotate(30deg); /* Safari and Chrome */
  18. -o-transform:rotate(30deg); /* Opera */
  19. }
  20. </style>
  21. </head>
  22. <body>

  24. <div>不使用html5  transform效果的div</div>

  26. <div id="div2">使用html5 transform旋转30度的效果</div>

  28. </body>
  29. </html>
复制代码
作者: phonegap100    时间: 2013-9-27 15:46
有竞争才有进步嘛
作者: admin    时间: 2013-9-27 21:25
支持一下:lol
作者: uqobk8216    时间: 2013-9-29 20:56
帮你顶下哈！！
作者: uqobk8216    时间: 2013-9-30 18:18
这是什么东东啊



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2