0

我在网格的顶部水平条上有以下带有对角线文本的网格：

http://jsfiddle.net/franco13/KjQbV/1/

它在 Firefox、Chrome 和 Safari 中正确显示

我无法让它在 IE9+ 和 Opera 中正确显示。

感谢您的帮助。

我的 HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="IE=9" http-equiv="X-UA-Compatible">
</head>
<table>
<tr id="userGroups">
<th class="no-rotate">List Items</th>
<th class="rotate"><div class="intact">Column 1</div></th>
<th class="rotate"><div class="intact">Column 2</div></th>
<th class="rotate"><div class="intact">Column 3</div></th>
<th class="rotate"><div class="intact">Column 4</div></th>
<th class="rotate"><div class="intact">Column 5</div></th>
<th class="rotate"><div class="intact"></div></th>
</tr>
<tr>
<td class="menuItems no-indent">Row 1</td>
<td class="rights">x</td>
<td class="rights">x</td>
<td class="rights">x</td>
<td class="rights">x</td>
<td class="rights">x</td>
</tr>
<tr class="rowhighlight">
<td class="menuItems indent">Row 2</td>
<td class="rights">x</td>
<td class="rights">x</td>
<td class="rights">x</td>
<td class="rights">x</td>
<td class="rights">x</td>
</tr>
</table>

我的 CSS：

table {
  margin-bottom: 20px;
}
tr#userGroups {
  border-bottom: solid 1px #999;
}
th.no-rotate {
  text-align: left;
  vertical-align: bottom;
}
th.rotate {
  -o-transform-origin: 325% 50%; /*Opera*/
  -moz-transform-origin: 325% 50%; /*Firefox*/
  -ms-transform-origin: 325% 50%; /*IE*/
  -webkit-transform-origin: 325% 50%; /*Safari*/
  transform-origin: 325% 50%;
  -o-transform: rotate(300deg); /*Opera*/
  -moz-transform: rotate(300deg); /*Firefox*/
  -ms-transform: rotate(-120deg); /*IE*/
  -webkit-transform: rotate(300deg); /*Safari*/
  transform: rotate(300deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*Internet Explorer*/
  -ms-writing-mode: bt-lr;
  writing-mode: bt-lr;
  position: relative; /* must have this whenever z-index is used */
  white-space: nowrap;
  z-index: 1; /* positioned under z-index:2 */
}
div.intact {
  display: inline-block;
  height: 150px;
  width: 30px;
}
tr.rowhighlight {
  background-color: #dedede;
}
td.menuItems {
  width: 220px; /* only place that controls width of the UGAR left column */
}
td.no-indent {
  font-weight: bold;
}
td.indent {
  padding-left: 12px;
}
td.rights {
  position: relative; /* must have this whenever z-index is used */
  width: 36px;
  z-index: 2; /* positioned over z-index:1 */
}
4

1 回答 1

1

Transform 是 css3 标准的一部分。旧浏览器不支持。

在以下链接中，您可以看到浏览器如何支持旋转的概述：

http://caniuse.com/#feat=transforms2d

如您所见，每个浏览器在转换之前仍然需要一个前缀，并且不支持 IE8 或更低版本。一个特定的 IE 解决方法是应用 filter: 标签。

您可以通过以下链接找到翻译： http ://www.useragentman.com/IETransformsTranslator/

于 2013-03-26T02:16:12.953 回答