Chrome übernimmt schlechte Table-Row-Stylings vom Internet Explorer

Der Google Chrome nimmt das Attribut „display: table-row“ übrigens extrem ernst und liefert eine 1A verbuggte Interpretation (erste Box): Der Hintergrund des umgebenden DIV mit der Klasse „row1“ wird in jedem untergeordneten DIV von neuem wiederholt. Das gilt nicht nur für den hier demonstrierten Background-Gradient, sondern auch für Hintergrundbilder. Im Firefox lässt sich das Phänomen nicht beobachten.

Die Lösung ist „einfach“ und traditionell bewährt: Anstatt display: table-row; und display: table-cell; nimmt man das halbwegs ausgereifte display: inline-block; für die inneren Elemente und arbeitet wieder mal mit festen Breiten.

Schade.

HTML:

<div class=row1> 
  <div class=cell>1</div>
  <div class=cell>2</div>
  <div class=cell>3</div>
  <div class=cell>4</div>
</div>
<hr>
<div class=row2> 
  <div class=cell>1</div>
  <div class=cell>2</div>
  <div class=cell>3</div>
  <div class=cell>4</div>
</div>

CSS:

.row1 {
  display: table-row;
  background-color: rgb(241,218,54); /* Old browsers */
  background-image: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Opera 12+ */
  background-image: -ms-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* IE10+ */
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0, rgba(241,218,54,1) 100%); /* FF3.6+ */
  background-image: radial-gradient(ellipse at center, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.row1 .cell {
  display: table-cell;
  padding: 150px;
}

.row2 {
  display: block;
  background-color: rgb(241,218,54); /* Old browsers */
  background-image: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* Opera 12+ */
  background-image: -ms-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* IE10+ */
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(254,252,234,1) 0, rgba(241,218,54,1) 100%); /* FF3.6+ */
  background-image: radial-gradient(ellipse at center, rgba(254,252,234,1) 0,rgba(241,218,54,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.row2 .cell {
  display: inline-block;
  padding: 150px;
}

Wer sich das ganze nicht zusammenkopieren will, kann auch einfach bei jsFiddle schauen, da hab ich das mal vorbereitet.

Veröffentlicht von

Ich bin Entwickler und Consultant bei Intera und erstelle nebenberuflich kleine Websites für kleine Unternehmen und Privatpersonen. Ich bin Open Source Fan und Blogger.

Portfolio . Blog . twitter . github

Kommentare sind geschlossen.