Wie IE 11 Ehre, Spalten, Spaltenbreiten in Tabellen, wenn Sie mit großen Bildern in Zeilen?

Den unten funktioniert gut in Chrome (neueste Version) und komischerweise in veralteten IE-Versionen - aber in der neuesten IE-version (11) es scheint nicht so zu Verhalten, wie ich möchte.

In Chrome (neueste) und veraltete IE-Versionen Spalte 1 ändert nicht die Breite, um Platz für das große Bild in Spalte 2, aber in der neuesten IE-version (11) es spielt - wie korrigieren?

<table>
 <tr>
  <td class="header">
     Column 1
  </td>
  <td class="header">
     Column 2
  </td>
 </tr>
 <tr>
   <td class="body_twenty">
     <table>
        <tr>
           <td>
              Test...
           </td>
        </tr>
     </table>
  </td>
  <td class="body_eighty">
     <table>
        <tr>
           <td>
              Test...
           </td>
           <td>
              Test...
           </td>
        </tr>
     </table>
  </td>
  </tr>
  <tr>
  <td class="body_twenty">
     <table>
        <tr>
           <td>
              Test...
           </td>
        </tr>
        <tr>
           <td>
           </td>
        </tr>
        <tr>
           <td>
           </td>
        </tr>
     </table>
  </td>
  <td class="body_eighty">
     Test...
     <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg">
  </td>
 </tr>
 <tr>
  <td class="footer">
  </td>
  <td class="footer">
  </td>
 </tr>
 </table>

Finden Sie unter: https://jsfiddle.net/tLfur3xz/1/

InformationsquelleAutor Stone | 2015-07-05

14

Fügen Sie diesem Stil:
```
table {
  table-layout: fixed;
}
```
Aktualisiert Fiddle

Wenn Sie fixed:

Tabelle und die Spaltenbreiten sind festgelegt durch die breiten von Tabelle und col
Elemente oder durch die Breite der ersten Reihe der Zellen.

MDN-Dokumentation

InformationsquelleAutor Rick Hitchcock
4

Es funktioniert, wenn ich das Bild Breite zu, indem Sie hinzufügen img { width: 100% }.

Lösung

InformationsquelleAutor GolezTrol
1

Ändern max-width: 100% zu width: 100% für das img-element.

https://jsfiddle.net/tLfur3xz/3/

Weitere Informationen finden Sie unter diese Frage.

Wenn Sie angeben, table-layout: fixed; in der css Tabelle funktioniert es.

Es scheint einige widersprüchliche Terminologie in der Norm
bezüglich table-layouts. Insbesondere table-layout: auto;, sagt dieser:

Die Spaltenbreite wird durch die breiteste unzerbrechlich Inhalt in den Zellen

Die Spaltenbreite wird durch die breiteste unzerbrechlich Inhalt in den Zellen
Da die Bilder Inhalte unzerbrechlich ist, es setzt die Breite der Zelle
um die Größe der Inhalte. Die max-width scheint überschrieben werden.

Aber in diesem Fall sehe ich keinen Unterschied zwischen der Verwendung von max-width und width auf das img-element, so dass eine einfache Einstellung der Breite scheint die bessere option für mich.

Komisch, ich wurde über einen link zu der gleichen Frage, aber die Erklärung es nicht empfehlen width: 100% aber table-layout: fixed wie @RickHitchcock schlägt.
Die table-layout-Methode scheint zu funktionieren besser, wenn Test in IE Vergangenheit und Gegenwart und Chrome (neueste Version). Aber schätzen Ihre Antwort.

InformationsquelleAutor Bram Vanroy
0

Was ich gefunden habe, für VIELE IE-Probleme ist dieses: Sie MÜSSEN fügen Sie die folgenden zwei Zeilen in die <head>
```
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
```
Diese lösen verschiedene Probleme, die nahm viel von meiner Zeit zu lösen.

können Sie erklären, was das bedeutet?

InformationsquelleAutor garr1095

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.