Maksymalna szerokość nie działa w tabeli dla IE7

Dlaczego więc "maksymalna szerokość" nie działa w tabelach w programie Internet Explorer 7? Maksymalna szerokość jest dostępna dla innych elementów i wygląda na to, że działa dobrze, ale gdy stosuje się do tabeli, nie mogę tego zrobić, tzn. Reguła Max-szerokość jest po prostu ignorowana. Oto kod:Maksymalna szerokość nie działa w tabeli dla IE7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Foo</title> 
</head> 
<body> 
    <div style="background-color: Red; max-width: 1000px;"> 
     <table style="background-color: Green; max-width: 500px;"> 

       <tr> 
        <td><a href="#" class="action view">View</a></td> 
        <td>7/20/2011</td> 
        <td>James Smith</td> 
        <td>345 NW 23rd Ave Gainesville, FL 32606</td> 
        <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td> 
        <td>345621</td> 
        <td>Fred Smith</td> 
       </tr> 
     </table> 
    </div> 
</body> 
</html>

W Firefoksie, tabela jest odpowiednio ograniczany do 500px, a tekst wewnątrz przerwach komórek w odpowiedni sposób (między słowami, tak jak można się spodziewać). W IE7 zastosowano podobną regułę "no-wrap". Każda komórka rozciąga się do jej potrzeb, bez prób dzielenia tekstu z komórką, a cały stół po prostu się rozciąga, aby zignorować zasadę maksymalnej szerokości.

Co się stało z tym gównem? Jak umieścić Max-Width na stole w IE7? (Współpracuje w FF & IE8)

Co Próbowałem, że nie działa:

tabeli {display: block; }

td {word-wrap: break-word; }

table {table-layout: fixed; }

Źródło

2011-08-11 Graham

Widocznie IE7 robi różne rzeczy z 'max-width' zależności od DTD: http://www.wileymedia.com/weblog/archives/2007/02/maxwidth_and_internet_explorer.html – vcsjones

Tak próbowałem kilka różnych DocTypes bezskutecznie. Ten artykuł jest poprawny dla ogólnych elementów blokowych, ale nie naprawia tabeli. – Graham

Ustawiona właściwość max-width dla tabeli jest ignorowana przez przeglądarki WebKit, zarówno Chrome, jak i Safari powodują, że tabela ignoruje maksymalną szerokość tak jak IE7. Zalecam ustawienie właściwości max-width na element opakowania, taki jak div.

Zobacz http://jsfiddle.net/P5YPR/1/

Źródło

2011-08-11 15:12:12

+1 Zawsze będę obsługiwał rozwiązania oparte na różnych przeglądarkach na atakach IE. Dobra robota. – AlienWebguy

@Alien Cieszę się, że to słyszę :) –

nadal nie działa na IE7. Jakieś wskazówki??? –

Spróbuj tego:

table#my_table { 
    max-width:500px; 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

Niestety nie zweryfikuje powodu ?. Dobrą wiadomością jest to, ponieważ jest to IE-tylko rozwiązanie można po prostu zrobić z elementów warunkowych podczas tworzenia tag <body> i konfiguracji IE specyficzne klasy:

<!--[if IE 9]><body class="ie9 ie"><![endif]--> 
<!--[if IE 8]><body class="ie8 ie"><![endif]--> 
<!--[if IE 7]><body class="ie7 ie"><![endif]--> 
<!--[if lte IE 6]><body class="ie6 ie"><![endif]--> 
<![if !IE]><body><![endif]>

Teraz w CSS:

table#my_table { 
    width:500px; 
    max-width:500px; 
} 

.ie7 table#my_table { 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

Źródło

2011-08-11 15:08:38 AlienWebguy

+1 Siiick. Zazwyczaj nie polecam wspierania IE <8, ale to jest solidne. – Maverick

To nie dotyczy WebKit. Safari i Chrome nadal będą renderować tabelę ignorując właściwość max-width. Jeśli @Graham jest naprawdę zainteresowany kompatybilnością z przeglądarkami, element opakowania jest znacznie bardziej elegancki. –

Twoja odpowiedź tutaj działa świetnie, ale wybrałem Bjorna jako "poprawną" dla mojej sytuacji, ponieważ tak naprawdę potrzebny jest div opakowania, a te wyrażenia po prostu mnie wyrzucają. Trochę lubię twoje lekcje na temat ciał z komentarzami IE! Dzięki! – Graham

Maksymalna szerokość nie działa w tabeli dla IE7

Odpowiedz

Powiązane problemy