Przepełnienie IE 8: ukryta i maksymalna szerokość

Chcę wyświetlić tekst w tabeli i chcę go wyciąć, gdy jest szerszy niż 150 pikseli, ale nie chcę stałej szerokości komórki tabeli (jeśli nie ma tekst, szerokość będzie wynosić 0 pikseli). Wszystko działa w IE9, Firefox, Chrome, Opera, ale nie w IE8.Przepełnienie IE 8: ukryta i maksymalna szerokość

przykład kodu w IE8:

enter image description here

przykład kodu w Chrome:

enter image description here

Oto kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
td, span { 
    border: 1px solid red; 
    max-width: 150px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

span { 
    border: 1px solid green; 
    display: block; 
} 
</style> 
</head> 
<body> 
<table> 
<tr> 
    <td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td> 
    <td>Works in Firefox, Chrome (and Opera but no dots)</td> 
    <td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td> 
</tr> 
</table> 
</body> 
</html>

Możliwe jest to zrobić bez żadnych javascript lub ustawienie stałe szerokość?

Źródło

2011-12-13 qavid

Szczerze, gdybym był, wysłałbym alert javascript, gdy ktoś otworzy stronę z IE8. Nie przejmuj się, że Twoja strona będzie kompatybilna z błędnymi przeglądarkami IE, to wina Microsoftu, a nie Twoja. – ApprenticeHacker

Pierwsza komórka nie działa w IE7. Obawiam się, że działa tylko w IE9. –

@IntermediateHacker Zgodnie ze specyfikacją CSS 2.1 wpływ maksymalnej szerokości na komórkę tabeli jest niezdefiniowany. Specyfikacja jest winna, a nie Microsoft. – ZippyV

Niestety, IE7 i IE8 mają bardzo błędne wsparcie dla reguły css max-width. Więc nie, nie będziesz w stanie zrobić tego niezawodnie bez javascript lub stałych szerokości. Jeśli to pomaga, kod, który masz, to , co do którego istnieje do pracy w IE 7+.

Ale można zrobić to tylko stałą szerokość dla tych dwóch przeglądarek dodając warunkową reguły css po zasad masz powyżej:

<!--[if lte IE 8]> 
    <style> 
    td, span { 
     width: 150px; 
    } 
    </style> 
<![endif]-->

Kiedy później przenieść CSS w zewnętrznym pliku, byś od Oczywiście to zmienić do znacznika link:

<!--[if lte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8.css" /> 
<![endif]-->

Alternatywnie, można wykryć IE 7 i 8 z JavaScript i przekierować użytkownika do tej strony: http://www.mozilla.org/de/firefox/new/

Źródło

2011-12-13 11:47:30 Donamite

maxWidth został wprowadzony w Windows Internet Explorer 7. – ZippyV

Tak, to absolutnie poprawne, zrobię tę poprawkę. Jest jednak bardzo błędny w IE 7 i 8, jak pokazuje kod w tym pytaniu. Osobiście byłem świadkiem tego, że działa (w IE 7/8) na jednym komputerze, ale nie na innym. I jak zauważył Lorenzo-s, to też nie działało dla niego. Prawdopodobnie zależy to od aktualizacji, ale niezależnie od przyczyny, zdecydowanie nie można polegać na tych przeglądarkach. – Donamite

Przepełnienie IE 8: ukryta i maksymalna szerokość

Odpowiedz

Powiązane problemy