Вертикальный текст в IE в рамках ячейки таблицы

Я пытаюсь повернуть некоторый текстовый перекрестный браузер в рамках тонкой ячейки таблицы, которая охватывает несколько строк. Я хочу, чтобы это было хорошей компактной сводкой строк, которая является, почему это тонко и повернуло-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 

Вы будете моим героем, если можно получить меня мимо этого :)

10
задан Community 23 May 2017 в 11:45
поделиться

2 ответа

Не самый элегантный способ, но он работает в IE8 (не пробовал в старых версиях):

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td>  
1
ответ дан 4 December 2019 в 01:29
поделиться

На вашем месте я бы открыл InkScape и создал три разных изображения.

или, поскольку у вас уже есть отпечатанные изображения, просто обрежьте их и поместите в качестве фонового изображения.

Я часто делаю очень красивый дизайн на css, который работает в chrome и firefox, а затем распечатываю его, обрезаю и заменяю фактический дизайн изображениями, и все это работает в IE.

или span: dispaly:block и height:100%; ??

3
ответ дан 4 December 2019 в 01:29
поделиться