it-swarm.com.de

Fehler in der Zellenbreite von Internet Explorer 8 mit Colspan

Ich habe die folgende HTML-Seite: 

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
<head>
    <title>A title</title>
</head>
<body>
    <table style="width: 700px; border: solid 1px green">
        <tr>
            <td style="border: solid 1px red;" colspan="2">A cell with a bunch of text.  The amount of text here increases the 'x' cell.<td>
        </tr>
        <tr>
            <td style="width: 100px; border: solid 1px purple;" >x</td>
            <td style="border: solid 1px blue;">Some sample text</td>
        </tr>
    </table>
</body>
</html>

In allen Browsern außer Internet Explorer (8) hat die Zelle mit dem Inhalt "x" eine Breite von 100 Pixeln, und die angrenzende Zelle füllt den Rest der Tabelle. In Internet Explorer 8 ist es etwas größer, und die Größe hängt davon ab, wieviel Text sich in der Zelle mit colspan = "2" befindet. Gibt es ein Update für diesen Fehler im IE?

42
Luke

Hier ist mein Ergebnis für fehlgeschlagene td width in IE8:

<table style="width: 100%;" border="1">
  <tr>
    <td style="width:auto;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

<!-- IE8 HACK  100% WIDTH -->
<table style="width: 100%;" border="1">
  <tr>
    <td style="width:100%;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>
13
Libor Skočík

Ok, das ist reiner Wahnsinn. Die Antwort von Ray funktionierte für den ersten Test, aber nicht für mein Beispiel aus dem wirklichen Leben, was mich veranlasste, einen zweiten Testfall mit Ray 's Fix zu erstellen:

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="width: 700px;">
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet Explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
            <td style="width:600px;">blah</td>
        </tr>
    </table>

    <table style="width: 700px;" border="0">
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
            <td style="width: 600px;">blah</td>
        </tr>
    </table>

</form>

</body>
</html>

Aus irgendeinem Grund führt die Eingabe der Elemente in der ersten Tabellenzelle dazu, dass die Lösung von Ray nicht ganz funktioniert. 

Die Lösung, die letztendlich den realen Fall löste, den wir zu beheben versuchten, erforderte das Hinzufügen von "table-layout: fixed" zu den Tabellen und dazu, dass die erste Zeile der Tabelle leere Zellen mit der gesetzten Breite hat. Hier ist eine modifizierte Version des vorherigen Beispiels mit dem soeben beschriebenen Fix:

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="table-layout: fixed; width: 700px;">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet Explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="background: green;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

    <table style="width: 700px; table-layout: fixed;" border="0">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="background: red;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

</form>

</body>
</html>

Wirklich Internet Explorer ??? JA WIRKLICH?

23
Luke

Luke's Antwort mit dem "table-layout: fixed" ist das, was es endlich für mich getan hat. Ohne "table-layout: fixed" ignorierte IE die expliziten Breitenangaben für die Nicht-Colspan-Zellen. Damit funktionierte alles, auch wenn man allen Nicht-Colspan-Zellen explizit sagen musste, wie breit sie sind, statt einfach nach links zu fließen, wie jeder andere Browser auf dem Planeten.

Endergebnis: Luke: +1 IE: Saugen Sie es.

4
ogradyjd

Verwenden Sie die setAttribute-Funktion. Attribut Name = "colSpan". Dies funktioniert auch auf IE 8 und Firefox.
Beispiel:

cell.setAttribute("colSpan", 9);
1
Sanath Nair

Da Sie die Größe der Tabelle kennen (700), können Sie den Fehler umgehen, indem Sie die Breite beider Zellen in der zweiten Zeile festlegen. Wenn die zweite Zelle auf 600 px eingestellt ist, verhält sich die Tabelle.

Aber es ist trotzdem scheiße.

Bearbeiten - hier ist eine weitere saugende Problemumgehung - fügen Sie der ersten Zelle ein leeres Bild hinzu, um die Größe zu erzwingen, und fügen Sie dann der xsekunden Zelle eine Breite von 100% hinzu:

<tr> 
  <td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" width="100" height="1" /></td> 
  <td style="border: solid 1px blue;width:100%;">Some sample text</td> 
</tr> 
0
Ray

Wenn Sie die Breite des ersten td (das mit colspan = "2") auf 100px setzen, erhalten Sie zumindest für diesen Testfall das gewünschte Verhalten.

Soweit ich feststellen kann, ist das Verhalten des IE8 gemäß CSS 2.1-Spezifikation hier korrekt: http://www.w3.org/TR/CSS2/tables.html#width-layout Abschnitt 17.5.2.2 Automatisches Tabellenlayout . Schritt 3 sieht verdächtig aus.

Dies ist jedoch wahrscheinlich ein spezieller Fehler, da in vielen Details alles sehr vage erscheint. Der Algorithmus in CSS 3 sieht viel genauer aus.

BEARBEITEN: Dies funktioniert auch mit Ihrem zweiten Testfall.

0
Alohci