Я пытаюсь повернуть некоторый текстовый перекрестный браузер в рамках тонкой ячейки таблицы, которая охватывает несколько строк. Я хочу, чтобы это было хорошей компактной сводкой строк, которая является, почему это тонко и повернуло-90 градусов. Подсказки описаны здесь:
Вертикальный (повернутый) текст в HTML-таблице
работайте как очарование кроме, неожиданное удивление, IE, где текст повернут, но текст отсекается к ширине ячейки.
Вот соответствующие стили:
#schedmenu td.label {
/*width:22px;*/
/*width:100%*/
vertical-align:middle;
font-size:12.5px;
}
#schedmenu td.label span {
display:block;
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
zoom: 1;
color:white;
position:relative;
top:12px;
}
и HTML:
Recent
Вы будете моим героем, если можно получить меня мимо этого :)
Не самый элегантный способ, но он работает в IE8 (не пробовал в старых версиях):
<td class="label" rowspan="3"><span>Recent<br/> </span></td>
На вашем месте я бы открыл InkScape и создал три разных изображения.
или, поскольку у вас уже есть отпечатанные изображения, просто обрежьте их и поместите в качестве фонового изображения.
Я часто делаю очень красивый дизайн на css, который работает в chrome и firefox, а затем распечатываю его, обрезаю и заменяю фактический дизайн изображениями, и все это работает в IE.
или span: dispaly:block и height:100%; ??