PhoneGap中文网

 找回密码
 立即注册
查看: 21895|回复: 4

css3 兼容不同浏览器样式怎么写

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
发表于 2013-7-19 17:55:37 | 显示全部楼层 |阅读模式

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  浏览器*/


transform效果

transform效果
  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>

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

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

  25. </body>
  26. </html>
复制代码
it营
回复

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
发表于 2013-9-27 15:46:17 | 显示全部楼层
有竞争才有进步嘛
it营
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
 楼主| 发表于 2013-9-27 21:25:48 | 显示全部楼层
支持一下:lol
回复 支持 反对

使用道具 举报

0

主题

59

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2013-9-29 20:56:56 | 显示全部楼层
帮你顶下哈!!
回复 支持 反对

使用道具 举报

0

主题

59

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2013-9-30 18:18:41 | 显示全部楼层
这是什么东东啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-30 08:38 , Processed in 0.047654 second(s), 35 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表