设为首页收藏本站

开启辅助访问切换到宽版

PhoneGap中文网»社区板块 › IT营全栈开发 › html5/css/js技术交流 › css3 兼容不同浏览器样式怎么写

发新帖

查看: 24183|回复: 4

上一主题

下一主题

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

493 主题	2035 帖子	6894 积分

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

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
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 */
}
</style>
</head>
<body>
<div>不使用html5 transform效果的div</div>
<div id="div2">使用html5 transform旋转30度的效果</div>
</body>
</html>

复制代码

收藏0 转播 淘帖0

相关帖子

it营

回复

使用道具举报

0 主题	59 帖子	61 积分

Rank: 2

积分: 61

5^#

发表于 2013-9-30 18:18:41 | 只看该作者

这是什么东东啊

it营

回复支持反对

使用道具举报

0 主题	59 帖子	61 积分

Rank: 2

积分: 61

地板

发表于 2013-9-29 20:56:56 | 只看该作者

帮你顶下哈！！

回复支持反对

使用道具举报

493 主题	2035 帖子	6894 积分

Rank: 9 Rank: 9 Rank: 9

积分: 6894

板凳

楼主| 发表于 2013-9-27 21:25:48 | 只看该作者

支持一下:lol

回复支持反对

使用道具举报

0 主题	108 帖子	116 积分

Rank: 2

积分: 116

沙发

发表于 2013-9-27 15:46:17 | 只看该作者

有竞争才有进步嘛

回复支持反对

使用道具举报

发新帖

站长推荐 /1

ionic4视频教程

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

GMT+8, 2024-11-23 13:24 , Processed in 0.052271 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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