Question

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

它在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 */
}

Answer 1

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

在以下链接中，您可以看到有关浏览器如何支持轮换的概述：

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

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

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

如何创建对角文本以在所有现代浏览器中正确显示

1 个答案: