中文在360浏览器中文字被逆时针旋转了90度

[qq137051908]

用360浏览器在本地打开网页不会出现此问题，但是发布到公司内部服务器上再访问服务器上的网页就会出现该问题。
我又给服务器装一个360浏览器，在服务器上用浏览器访问localhost/index.html不会出现该问题，如果我把localhost换成服务器ip就会出现这个问题，真是蛋疼。谁知道是什么问题吗？
下图为我在服务器上用360浏览器打开的效果图，IIS什么都没有设置，就新建站点选择文件目录

[qq137051908]

蛋疼的紧，原因是定义字体的时候前面加了@。

[qq137051908]

这个是公共样式

@charset "utf-8";
/* common */
* {
margin: 0;
padding: 0;
}
html,body,div,span,applet,object,iframe,p,blockquote,pre,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {border:0; outline:0; font-family:@微软雅黑,@黑体; font-size:13px;}
ol,ul { list-style:none; }
li{list-style:none; list-style-type:none;}
body{overflow-x:hidden;color:#fff;}
img{border:0;}
a{ text-decoration:none; color:#fff;}
a:link{}
a:hover{}
.clear{clear:both;}
.space{height:36px;}
.b{font-weight:bold;}
.main{margin:0 auto; width:1366px; position:relative;}
.font30{ font-size:30px;}
.font25{ font-size:25px;}
.font22{ font-size:22px;}
.font16{ font-size:16px;}
.font15{ font-size:15px;}
.color_ffcabf{ color:#ffcabf;}
.color_ffa0a1{ color:#ffa0a1;}


/* header */
.header{background:url(../images/header_background.jpg) repeat-x; height:650px; padding-right:15%; overflow:hidden;}
.header .navigation{ padding-top:30px; z-index:2; position:relative; margin-bottom:100px;}
.header .navigation ul li{font-size:15px; font-weight:bold; width:80px; text-align:center; float:right; margin-left:20px;}
.header .navigation ul li.index{margin-right:-10px;}
.header .navigation span{ display:block; height:2px; width:80px; background:#fff; margin:8px auto;}
.header .left{ float:left; width:50%;text-align:right;}
.header .right{ float:left;width:50%; text-align:right;}
.header .right p{ margin-right:7px; line-height:50px;}
.header .right h1{ font-size:80px;margin-right:7px; z-index:3;position:relative;}
.header .right .p_lin_1{ font-size:25px; z-index:4; position:relative;}
.header .right .p_lin_2 .sp1{margin-right:3px;}
.header .right .p_lin_2 .sp2{margin-right:35px;}
.header .right .p_lin_2 .sp3{margin-right:10px;}
.header .right .p_lin_3 .sp1{margin-right:10px;}
.header .right .p_lin_3 .sp2{margin-right:58px;}
.header .right .p_lin_3 .sp3{margin-right:5px;}
.header .right .p_lin_4 span{ margin-top:50px;text-align:center; padding-top:3px;display:block;width:170px;height:50px;border:2px solid #fff; float:right;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.header .right .p_lin_4 a{ font-size:20px;}
.header .sign{position:absolute;top:0px;left:15%;}
.header .sign .title{ height:95px; width:160px; background-color:White; position:relative; z-index:10; color:#f33; text-align:center; font-weight:bold;}
.header .sign .title h1{ font-size:45px;padding-top:12px;}
.header .sign .title span{ color:#ff4143; line-height:25px;}
.header .sign .mask{height:95px; width:160px;background-color:#d82223;position:relative; z-index:9;top:-80px;left:20px;}
.header .banner{position:absolute; left:0px; top:151px; z-index:1;}


/* content */
.content{text-align:center;}


/* footer */
.footer{background-color:#3d3d3d; height:200px; text-align:center;padding-right:15%;}
.footer .info{float: left; width:100%; z-index:2; position:relative;}
.footer .info ul{padding-top:50px;}
.footer .info ul li{margin-right:10px;display: inline;padding: 5px; }
.footer .copyright{ color:#bfbfbf; line-height:50px;}
.footer .copyright span{ margin-right:20px;}
.footer .copyright a{color:#bfbfbf;}
.footer .copyright a:hover{text-decoration:underline;}
.footer .link ul{display:table;margin:10px auto;}
.footer .link ul li{display:table-cell; vertical-align:middle;color:#bfbfbf; padding-right:10px;}
.footer .return_top{ text-align:right;position:relative; top:-150px;right:7px;}
.footer .return_top img{ cursor:pointer;position:relative;z-index:3;}

这个是首页的样式

@charset "utf-8";
/* index */
.content{color:#7e7e7e;margin-top:90px;}
.content .Introduction{padding-right:15%;}
.content .Introduction ul{}
.content .Introduction ul li{ width:265px; overflow:hidden; float:right; padding-left:80px;}
.content .Introduction h2{ font-size:30px;color:#545454; font-weight:bold; margin-top:30px; margin-bottom:30px;}
.content .Introduction p{ text-align:left;font-size:15px;word-wrap: break-word;word-break: normal; line-height:25px; }
.content .Introduction div div{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; width:173px; height:53px; border:2px solid #f33; margin:30px auto; }
.content .Introduction div div a{color:#f33; font-size:20px; font-weight:bold; line-height:57px;}
.content .cooperation{ width:100%; background:url(../images/cooperation_bg.jpg) repeat-x;height:63px; position:relative; margin-top:80px;}
.content .cooperation .sign{padding-right:15%;}
.content .cooperation .sign div{ padding-right:790px;}
.content .cooperation b{ float:right;}
.content .cooperation .red{ display:block; width:7px; height:63px; background-color:#f33;}
.content .cooperation .title{ font-size:23px; margin-left:10px; padding-top:39px;}
.content .cooperation_content{padding-right:15%; margin-top:50px; }
.content .cooperation_content div{ float:right; margin-right:5px;display:table;margin-bottom:80px;}
.content .cooperation_content span{display:table-cell; vertical-align:middle; }
.content .cooperation_content span.imglist img{ margin-left:2px; overflow:hidden;}
.content .cooperation_content span.left img{ margin-right:30px; cursor:pointer;}
.content .cooperation_content span.right img{ margin-left:30px;cursor:pointer;}

页面就引用了这两个样式，实在不知道是什么问题。。 其他浏览器没有出现此问题

[junlinfushi]

引用 3 楼 qq137051908 的回复:

蛋疼的紧，原因是定义字体的时候前面加了@。

额，好吧。

[萧萧可乐]

不会的吧。。。 我刚才试了下 定义字体的时候 前面加@ 浏览器会跳过那一行的样式。。 包括 @charset “utf-8”；

[孤飞不倦]

引用 3 楼 qq137051908 的回复:

蛋疼的紧，原因是定义字体的时候前面加了@。

好吧，这个是css hack了吧。