CSS3 transform:rotate() 浏览器兼容问题。。求各种解决

DanSir 2013-01-25 06:52:51


以下是CSS代码:

/* 翻页*/
#tbh5v0 .c-pnav-con{text-align:center;font-size:18px;}
#tbh5v0 .c-pnav-con .c-p-sec{display:inline-block;margin:20px auto;}
#tbh5v0 .c-pnav-con .c-p-sec div{display:inline-block;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-pre{width:90px;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-pre a{display:inline-block;width:70px;height:30px;line-height:30px;background:-webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e8e8e8));border:1px #D5D5D5 solid;overflow:hidden;border-radius:2px;-webkit-border-radius:2px;border-left:0px #d5d5d5 solid;border-right:1px #d5d5d5 solid;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-pre .c-p-p{display:inline-block;width:17px;height:30px;position:relative;overflow:hidden;vertical-align:top;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-pre .c-p-p em{display:inline;transform: rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform: rotate(45deg);-moz-transform: rotate(45deg);background:-webkit-gradient(linear, left top, right bottom, from(#fefefe), to(#e8e8e8));position:absolute;top:4px;left:6px;width:21px;height:21px;border:1px solid #dddddd;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-next{width:90px;margin-left:5px;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-next a{display:inline-block;width:70px;height:30px;line-height:30px;background:-webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e8e8e8));border:1px #D5D5D5 solid;overflow:hidden;border-radius:2px;-webkit-border-radius:2px;border-left:1px #d5d5d5 solid;border-right:0px #d5d5d5 solid;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-next .c-p-p{display:inline-block;width:17px;height:30px;position:relative;overflow:hidden;vertical-align:top;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-next .c-p-p em{display:inline;transform: rotate(45deg);-webkit-transform:rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);background:-webkit-gradient(linear, left top, right bottom, from(#fefefe), to(#e8e8e8));position:absolute;top:4px;left:-12px;width:21px;height:21px;border:1px solid #dddddd;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-cur{position:relative;height:30px;vertical-align:baseline;text-align:center;margin-left:5px;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-cur .c-p-arrow{display:inline-block;width:88px;line-height:30px;border:1px solid #dddddd;background:-webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e8e8e8));}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-cur .c-p-arrow span:first-child{margin-right:5px;width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-cur .c-p-down span:last-child{display:inline-block;font-size:0;border-top:3px solid #666666;border-left:3px solid #666666;width:6px;height:6px;background-color:transparent;-webkit-transform:rotate(225deg);-o-transform: rotate(225deg);-moz-transform: rotate(225deg);-ms-transform: rotate(225deg);transform: rotate(225deg);margin-bottom:3px;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-cur .c-p-up span:last-child{display:inline-block;font-size:0;border-top:3px solid #666666;border-left:3px solid #666666;width:6px;height:6px;background-color:transparent;-webkit-transform:rotate(45deg);-o-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(225deg);transform: rotate(225deg);}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-grey{display:inline-block;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-grey a{color:#999;}
#tbh5v0 .c-pnav-con .c-p-sec .c-p-select{position:absolute;top:0px;left:0px;height:30px;width:90px;opacity:0;z-index:10000;}


以下是前台代码:
<div id="tbh5v0">
<div class="c-pnav-con">
<section class="c-p-sec">
<div class="c-p-pre c-p-grey">
<span class="c-p-p"><em></em></span><a>上一页</a>
</div>
<div class="c-p-cur">
<div class="c-p-arrow c-p-down">
<span>1/2</span><span></span>
</div>
<select class="c-p-select"><option>1</option><option>2</option></select>
</div>
<div class="c-p-next">
<a>下一页</a><span class="c-p-p"><em></em></span>
</div>
</section>
</div>
</div>
...全文
976 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
插件可以吗?http://code.google.com/p/jqueryrotate/
DanSir 2013-01-25
  • 打赏
  • 举报
回复
在手机浏览器中看的时候会变成

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧