css - 标题列中带有头像的标签的垂直文本

Question

我正在尝试在标题表上制作一个带有垂直文本和头像的表格。

结果应该是这样的：

所以我的问题是：
1）我应该在我的css文件中做什么才能让文本旋转270度（制作.rotate（270度）；弄乱一切）
2）名称在头像顶部对齐？
3）它适用于谷歌浏览器但不适用于火狐:(

这是我的演示：http ://codepen.io/anon/pen/CogKe

这是我的代码：

.rotate(@deg){
  -webkit-transform: rotate(@deg);

}
table th.user span.name{
  display:block;
  .rotate(90deg);
  padding: 190px 0 0 0;
  position: relative;
  left: 20px;
  width: 200px;
}
table, td, th
{
border:1px solid green;
}
.user, tbody td {
  max-width: 50px;
  text-align: center
}

Answer 1

试试这个以避免跨浏览器文本旋转问题

.rotate {
     -moz-transform: rotate(270deg);  /* FF3.5+ */
       -o-transform: rotate(270deg);  /* Opera 10.5 */
  -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=270);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=270)"; /* IE8 */
}

HTML 表格中的垂直（旋转）文本