这就像我得到的那样接近。在IE 9中,行标题定位错误。在IE 8中,文本不会向右旋转(-90对90度)。在Chrome中,我无法调整列宽。我现在愿意在IE 9中做到这一点。我需要做什么才能使旋转的行标题在行中正确定位?
<html>
<head>
<style type="text/css">
.TableGroupHeader_cell
{
width: 3em;
height: 20em;
border: 2px solid #DDB575;
}
.TableGroupHeader_text
{
border : 1px solid black;
}
.TableGroupHeader_div
{
writing-mode:tb-rl;
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
text-align: center;
font-weight: bold;
font-size: large;
border: 1px solid red;
width: 10em;
height: 2.5em;
}
</style>
<!--[if lt IE 9]>
<style>
.TableGroupHeader_div
{
writing-mode:tb-rl;
-ms-transform: rotate(10deg);
text-align: center;
font-weight: bold;
font-size: large;
border: 1px solid green;
width: 2.5em;
height: 10em;
}
</style>
<![endif]-->
<!--[if IE 9]>
<style>
.TableGroupHeader_div
{
writing-mode:tb-rl;
-ms-transform: rotate(180deg);
text-align: center;
font-weight: bold;
font-size: large;
border: 1px solid green;
width: 2.5em;
height: 10em;
}
</style>
<![endif]-->
<title>Test</title>
</head>
<body>
<table>
<tr class="TableDataRow">
<td class="TableGroupHeader_cell">
<div class="TableGroupHeader_div">
<label class="TableGroupHeader_text">Row Header</label>
</div>
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分:0)
我手边没有很多版本的资源管理器,但是这个代码在这个浏览器中工作到目前为止:
<style type="text/css">
* { border: 0px; margin: 0px; padding: 0px; }
.TableGroupHeader_cell { width: 3em; height: 20em; border: 2px solid #DDB575; }
.TableGroupHeader_div { text-align: center; font-weight: bold; font-size: large; border: 1px solid red; width: 10em; height: 6.5em; }
.TableGroupHeader_div { writing-mode:tb-rl; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform: rotate(270deg); }
.TableGroupHeader_text { border: 1px solid black; display: block; height: 100%; width: 100%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }
</style>
那些代码是你的,只有很少的额外内容,而且我删除了所有注释,所以没有处理资源管理器版本。我把规则分开,让我更清楚,我希望这不是问题。
主要更改是将标签设置为块组件,并将filter属性应用于对象。
你可以在这里阅读:
再见