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>

...全文