我有以下网格，网格的顶部水平条上有对 Angular 线文本:
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 */
}
最佳答案
Transform 是 css3 标准的一部分。并且在旧版浏览器中不受支持。
在以下链接中，您可以看到浏览器如何支持旋转的概述:
http://caniuse.com/#feat=transforms2d
如您所见，每个浏览器在转换之前仍然需要一个前缀，并且不支持 IE8 或更低版本。一个特定的 IE 解决方法是应用 filter: 标签。
您可以通过以下链接找到翻译: http://www.useragentman.com/IETransformsTranslator/
关于css - 如何创建对 Angular 文本以在所有现代浏览器中正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15623356/