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

Question

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

<td class="label" rowspan="3"><span>Recent</span></td> 

Ты будешь моим героем, если сможешь пройти мимо меня:)

Answer 1

Я создал 2 CSS, один для IE и один для остальных браузеров. Для IE я использовал:

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();"

Answer 2

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

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

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

или span: dispaly: блок и высота: 100%;??

Answer 3

Я обнаружил, что, хотя это, похоже, работает, оно обрезалось, как и в оригинальном сообщении. Поиграв с несколькими опциями, я добавил «table-layout: fixed;» к столу css. Таким образом, я мог бы принудительно настроить ширину всех столбцов до требуемой, и весь диапазон отображался бы.

В настоящее время тестируется только в IE8, но я считаю, что он должен работать в кросс-браузерном режиме, поскольку единственное, что я действительно добавил, это макет таблицы, который, по моему мнению, полностью принят? Установка его в фиксированное состояние делает все столбцы равными (игнорируя содержимое), за исключением случаев, когда ширина была установлена, поэтому вам нужно установить всю ширину, где требуется.

Просто мысль в любом случае.

Мой связанный CSS:

table.comp{
    table-layout: fixed;
}
th.vertth {
    vertical-align:middle;
    height: 125px;
    width: 20px;
    overflow: hidden;
}
th.vertth span {
    -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;
    position:relative;
    display:block;
    margin: 0;
    width: 125px;
}

Обратите внимание, что ширина пролета должна быть такой же, как и высота ячейки, чтобы предотвратить ее выплескивание. Если у вас есть больший контент для размещения в диапазоне, рассмотрите возможность изменения высоты или ширины столбца.

Answer 4

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

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td>