Pytanie Jak mogę wykonać "display: block" na w IE?


Czy jest coś, co mogę zrobić, aby komórki tabeli wyświetlania IE były rzeczywistymi blokami?

Biorąc pod uwagę ten styl:

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}

I ten html:

<table>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
  </tbody>
</table>

<div>
  <div>
    <div>
      <div>R1C1</div>
      <div>R1C2</div>
      <div>R1C3</div>
    </div>
  </div>
</div>

Tabela renderuje dokładnie tak samo, jak zagnieżdżone elementy div w przeglądarkach Firefox i Safari / Chrome. Ale w przeglądarce Internet Explorer (8) właściwość display: block nie ma żadnego efektu. Tabela renderuje dokładnie tak, jakbym nie ustawiła tej właściwości.

Moim głównym problemem jest to, że komórki nie pękają; Wszystkie renderują się na jednej linii. (The tbody i tr elementy nie mają żadnych granic ani dopełnienia. Teraz jednak nie stanowi to dla mnie problemu.)

Nie znalazłem żadnych informacji o problemie podczas wyszukiwania. Tabele zgodności w trybie quirksmode i gdzie indziej stwierdza, że ​​IE obsługuje display: block od wersji 5.5. Jakakolwiek dyskusja na temat problemów z wyświetlaniem tabeli wydaje się być odwrotna - dając elementy inne niż tabelowe display: table-* nieruchomości.

Czy po raz kolejny jest coś, co mogę zrobić, aby IE renderował komórki tabeli jako blok?

(Prawdziwy stół to tak naprawdę tabela z danymi tabelarycznymi. Chciałbym zachować ją w ten sposób i zmienić ją dyskretnie.)


37
2018-02-23 13:25


pochodzenie


Dlaczego, na Boga, chciałbyś to zrobić? - Kyle
Zmieniam go na barchart, gdzie każdy rząd staje się poprzecznym prętem o szerokości odjętej z zawartości jednej komórki, z pozostałymi td: s ustawionymi w lewo. Działa doskonale w przeglądarkach Firefox, Safari i Chrome. - Daniel
Myślę, że lepiej zignorujesz moją odpowiedź. Zamiast tego należy użyć Javascript / jQuery, aby dynamicznie utworzyć wykres słupkowy z danych tabeli. Jak połączenie to i to. Nie sądzę, że możesz znaleźć sposób na niezawodne wykonanie <table>zachowuj się tak, jak chcesz. - thirtydot
Dzięki jeszcze raz. To prawdopodobnie prawda. I tak zajmuję się częścią transformacji poprzez jQuery. Poszedłem za rozwiązaniem manipulowania istniejącymi obiektami DOM zamiast je zastępować, ponieważ wydawało mi się czystsze i działało dobrze - dopóki nie wróciłem do komputera w pracy i IE ... Och, dobrze. Sądzę, że powinienem już wiedzieć, żeby nigdy nie szlifować szczegółów w żadnej przeglądarce przed przetestowaniem podstaw. - Daniel
Rzeczywisty przypadek użycia: sprytny Chris Coyier technika tablic danych responsywnych nie działa w IE 9 bez pomocy. - Jordan Gray


Odpowiedzi:


zgłosiłem się float: left do rzeczy. To działa.

Live Demo

Największym problemem jest width: 100% w połączeniu z padding sprawia, że ​​rzeczy są zbyt szerokie.

Więc:
Live Demo (bez problemu padding)

Wygląda to nieco lepiej, ale nie jestem pewien, jak łatwo dodać padding wszędzie, jeśli tego potrzebujesz.


To się nie powiedzie -> marnie <- w IE7 (to po prostu nie przeoczy faktu, że jest to <table>), a nawet jeśli nie dbasz o IE7, będzie to wymagało ulepszenia w twoim przypadku użycia (jeśli w ogóle będzie można go używać).

IE7:

enter image description here


36
2018-02-23 13:56



W takim przypadku sugeruję przejście do elementów div z wyświetlaczem: tabela (etc) zestaw właściwości. - Marcin
@Marcin: Musisz uważniej przeczytać pytanie. PO wyraźnie chce zachować table tagi i zmienić je: "The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.". - thirtydot
Jeśli ustawisz właściwości wyświetlania, to naprawdę będzie działać jako tabela. Nie widzę problemu. - Marcin
@Marcin: Powiedziałeś: "I suggest switching to divs" - PO powiedział (parafrazując): "I have my <table>s and I want to make them behave like <div>s". On nie chce zmieniać <table> HTML, właśnie to robię tutaj. - thirtydot
@Marcin: Chcę mieć i zjeść ciastko jak mogę w innych przeglądarkach. ;-) Jestem świadomy, że istnieją inne opcje do mojego obecnego znacznika, i to nie jest ogromny problem, ale miałem nadzieję rozwiązać ten problem, opierając się na standardowym, niezaskakującym css / javascript, który już posiadam. Ponieważ nie znalazłem żadnych informacji, czy IE może lub nie może tego zrobić, lub jeśli jest jakieś dziwactwo, z którego mógłbym skorzystać, miałem nadzieję, że ktoś, kto wie więcej, zadzwoni. Wtedy byłem trochę zaniepokojony, gdy było to insynuowane być nieuzasadnionym. (Dodałem ostatni akapit, aby uniknąć tej dyskusji ...) - Daniel


Poniższe pracował dla mnie dla IE6 +:


tr {
  Blok wyświetlacza;
  pozycja: względna
}

td.col1 {
  Blok wyświetlacza;
  lewo: 0;
  top: 0;
  wysokość: 90 pikseli;
}

td.col2 {
  Blok wyświetlacza;
  pozycja: absolutna;
  lewo: 0;
  u góry: 30 pikseli;
}

td.col3 {
  Blok wyświetlacza;
  pozycja: absolutna;
  lewo: 0;
  góra: 60 pikseli;
}

Założenia:

  • wysokość komórki 30 pikseli

Wady:

  • Naprawiono wysokość komórki
  • Trudna specyfikacja top właściwość (może generować)
  • Działa tylko wtedy, gdy HTML udostępnia klasy dla kolumn

Korzyść:

  • Działa we wszystkich przeglądarkach.

Kiedy użyć:

  • Kiedy nie masz kontroli nad HTML, ale masz kontrolę nad CSS. Niektóre hostowane rozwiązania płatnicze przychodzą na myśl, że wyświetlają się w IFRAME i oferują niestandardowy arkusz stylów.

4
2018-04-14 17:36





Po prostu wymyśliłem to z moim kolegą.

CHOCIAŻ SILNIE POLECAM, ABY NIE WSPIERAĆ IE8 NA WSZYSTKIM! Ponieważ ułatwiasz korzystanie z nieobsługiwanego i obecnie niebezpiecznego produktu, który nie jest zgodny z aktualnymi standardami i technikami. Lepiej byłoby poinformować użytkowników o aktualizacji i dać im kilka linków do pobrania przeglądarki do wyboru.

To powiedziawszy. Poniższy CSS to minimum css, które musisz poprawić w Internet Explorerze 8.

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }
<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>


3
2017-11-24 14:59



"Lepiej byłoby powiedzieć swoim użytkownikom, aby dokonali aktualizacji i dać im kilka linków do pobierania w przeglądarce do wyboru." - Nie wszyscy użytkownicy mogą dokonać aktualizacji, a wiele osób nie będzie przejmować się lub zrozumie komunikat aktualizacji twojej przeglądarki. - Paul D. Waite
Tak. Zgadzam się. Dlatego stworzyłem bezpłatny interfejs API, aby to ułatwić. Widzieć: webvakman.nl/api/recentbrowserversions - Marc van Nieuwenhuijzen
@ PaulD.Waite Przepraszamy. Źle zrozumiałem twój komentarz. Niektóre osoby mogą nie rozumieć, ale to nie znaczy, że nie powinieneś próbować. Ponosisz odpowiedzialność jako programista stron internetowych, a IE8 (lub jakakolwiek inna wersja) jest wycofywana z użycia i nie powinna już być używana. Nawet Microsoft nie obsługuje tego. - Marc van Nieuwenhuijzen
Tak, nie mówię, że IE 8 to dobry wybór. Mówię, że to nie twoja odpowiedzialność. Zachęcanie użytkowników do aktualizacji przeglądarki podczas odwiedzania witryny przypomina trochę lokalny sklep warzywny, który informuje Cię, aby kupić nowy samochód, gdy pojawi się na niektórych bananach. Nawet jeśli mają rację, to nie jest to, po co tam poszedłeś, nie masz żadnego konkretnego powodu, aby zaufać ich opinii na temat konserwacji samochodów, a może dosłownie nie masz teraz możliwości, by zdobyć nowy samochód. - Paul D. Waite
Sądzę, że webdevelopers są bliżsi przeglądarkom niż greengrocer do samochodu. Bardziej przypomina sklep warzywny, który mówi, żeby nie wkładać warzyw do starożytnego egipskiego pojemnika, bo wie, że nie jest szczelny i nie będzie tam świeży. Wiesz, z powodu wszystkich innych klientów, którzy mają zgniłe warzywa z ich starożytnych greckich pojemników: D To bardziej jak chirurg w metrze, który widzi kogoś, kto ma bardzo złego mola. Lepiej mówić i wskazywać właściwego onkologa. Nie tego oczekiwał w tym czasie, ale może uratować mu życie ... - Marc van Nieuwenhuijzen


dodaj ten kod:

<!DOCTYPE html>

我 这里 是 这么 解决 的, 加上 上面 那条 声明 语句, display: block 对 td 就会 有效.

potrzebujesz dodać ten kod na górze.

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Dodaj tę linię kodu w górnej części, ale użyj "float", a "width" jest bardzo dobra. przepraszam, mój angielski tak biedny.


0
2017-07-16 06:56



Niestety, twój przykład jest wyświetlany jako tabela w IE8. Łańcuch doctype, który sugerujesz, nie powinien mieć innego efektu niż <!DOCTYPE html> lub dowolny inny typ dokumentu, który przełącza tryb Standardowy (patrz hsivonen.fi/doctype dla szczegółów). - Ilya Streltsyn


Zrób to display:table-row;  zamiast display:block Będzie działało tak, jak powinno


0
2017-07-31 06:48



Uczyć się jak korzystać z bloku kodu - 蕭為元
To nie daje odpowiedzi na pytanie. Kiedy już wystarczy reputacja będziesz w stanie skomentuj dowolny wpis; zamiast, udzielać odpowiedzi, które nie wymagają wyjaśnień od pytającego. - Z recenzji - Yan Sklyarenko