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

変換はcss3標準の一部です。また、古いブラウザではサポートされていません。

次のリンクで、ブラウザがローテーションをサポートする方法の概要を確認できます。

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

ご覧のとおり、変換前にすべてのブラウザーでプレフィックスが必要であり、IE8以下はサポートされていません。特定のIEの回避策は、filter：タグを適用することです。

次のリンクから翻訳者を見つけることができます： http ：//www.useragentman.com/IETransformsTranslator/

于 2013-03-26T02:16:12.953 に答える