/ / błąd rotacji zawartości komórki tabeli w ie8 i ie9 - html, css, internet-explorer-8, rotacja, internet-explorer-9

błąd obracania zawartości komórki tabeli w ie8 i ie9 - html, css, internet-explorer-8, rotacja, Internet-explorer-9

Próbuję utworzyć tabelę, która będzie miała komórki w pierwszej kolumnie z rowspan. Chciałbym, aby ten tekst został obrócony.

Udało mi się to naprawić na chromie, ale na IE mam dziwny wynik.
To jest wynik w Chrome: wprowadź opis obrazu tutaj

i to jest na IE8 (IE10 działa dobrze): wprowadź opis obrazu tutaj

a tutaj jest wynik IE9: wprowadź opis obrazu tutaj

Próbowałem z właściwościami szerokości i wysokości, ale to nie pomogło.

Poniżej znajduje się mój css dla tych elementów td i oto jsFiddle, aby go przetestować: http://jsfiddle.net/qYySC/4/

td.rotate div {
vertical-align: middle;
text-align: center;
font-size: 12px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Jak mam zmienić css, aby usunąć ten problem wyrównania? Moja tabela jest generowana przez serwer, więc może mieć inny rozmiar (liczba wierszy w grupach).

Muszę to załatwić na IE8.

EDYTOWAĆ:
Kiedy zmieniam długość tekstu w obróconych komórkachzaczyna wyglądać prawie dobrze. Ale jeśli będę miał dłuższy tekst, mogę go jakoś zawinąć w dwie linie?

Odpowiedzi:

3 dla odpowiedzi № 1

Masz tu dwa problemy:

  • Po pierwsze, w IE8 i wcześniejszych:

    IE8 używa filter styl do obracania za pomocą ActiveX. Jest to skomplikowana bestia, ale głównym problemem jest to, że jej domyślnym punktem obrotu jest lewy górny róg elementu, a nie środek. To wyjaśnia, dlaczego element jest obracany do innej pozycji niż standardowy CSS.

    Można ją zmienić, aby użyć środka jako punktu obrotu, ale trzeba użyć znacznie bardziej złożonej składni w filter styl, używając matrix filtr. Matematyka wymagana do nawet podstawowych obrotówz tym jest trochę onieśmielające, ponieważ wszystko jest w radianach, a to jest złożona transformacja macierzy, ale można ją opracować i istnieją przykłady w sieci, jeśli wiesz, gdzie szukać, w tym istniejące pytania tutaj na temat SO. Na szczęście liczba radian wynosi 270obrót stopnia jest właściwie stosunkowo czytelny, ale nie zawsze tak jest. W większości przypadków zalecałbym korzystanie z biblioteki papieru ściernego CSS (patrz niżej) zamiast ręcznego opracowywania filter matryca.

  • Po drugie IE9:

    IE9 ma podwójny problem. Problem polega na tym, że w IE9 dodali obsługę standardowego CSS transform styl, ale oni również utrzymywał wsparcie dla starych filter styl.

    Oznacza to, że w IE9 twój kod jest w rzeczywistościuderzając w oba z nich i jest dwukrotnie obracany przy użyciu różnych technologii. Prowadzi to do całkowitej dezorientacji IE, dlatego renderowane są czarne skrzynki.

    Szybkim rozwiązaniem jest ustawienie jednego lub drugiego stylu, tak aby nie był widoczny dla IE9. Może to być arkusz stylów specyficzny dla wersji IE, hack CSS lub cokolwiek innego.

To wyjaśnia, co się dzieje i daje wskazówki, jak to naprawić.

Ale jest jeszcze jedno rozwiązanie, którego możesz chcieć użyć. Nazywa się biblioteka JS Papier ścierny CSS który działa jak wypełniacz dla transform styl; tzn. dodaje obsługę standardowej transformacji CSS do starszych wersji IE.

Moja rada dla najlepszego rozwiązania polega na pobraniu biblioteki CSS Sandpaper, umieszczeniu jej w swojej witrynie i zmianie filter style do -sand-transform:rotate(270deg);

Nadzieja, która pomaga.


-1 dla odpowiedzi № 2

Jest wiele problemów z twoim <table> znaczników, a zatem prawdopodobnie przyczyną bałaganu.

  1. Ty używasz <tbody> ale nie <thead> lub <tfoot>.
  2. Umieszczasz <div> wewnątrz <td>. - Czy DIV w TD to zły pomysł?
  3. Nie używasz żadnego <col> elementy.

Wygląda na GG, FF, AS, OWB, a także IE10 i IE9. Ale na IE8 jsfiddle w ogóle nie chce się pojawić.