CSS-Anzeige: Tabelle; Abstandsproblem auf Chrom

Ich verwende display:table; auf einem div Element. Auf allen anderen Browsern, die ich getestet habe, gibt es keine Probleme. Auf Chrome 22 (neueste) und Canary erhält die div jedoch 1px Abstand auf beiden linken und rechten Seiten.CSS-Anzeige: Tabelle; Abstandsproblem auf Chrom

Irgendeine Idee, wo das Problem liegt?

EDIT:
margin, border, padding sind alle 0.

Auch werden alle Tabelleneigenschaften entfernt:

border-spacing:0; 
border-collapse:collapse; 
table-layout:fixed;

Quelle

2012-11-02 Francisc

Alle Geigen? Setzen Sie alle Elemente mit reset.css oder einer anderen Art zurück? Wenn nicht, empfehle ich einen zu verwenden. – srijan

Meinst du 1px Padding oder Marge? Wie oben würde ich empfehlen, eine reset.css-Datei zu versuchen. –

Sache ist, es ist weder.Padding ist 0, Rand ist 0, Rand ist 0. Dann Randabstand: 0; Rand-Kollaps: Kollaps; Tabellen-Layout: Fest ;. – Francisc

Ich hatte das gleiche Problem. Es wurde von Micro-Clearfix-Hack verursacht. Entfernte den .clearfix Stil löste das Problem.

Quelle

2013-02-18 19:42:35 noun

Das ist sehr subtil, danke, Pinco. – Francisc

Ich würde die Marge und padding auf allen Browsern zurückgesetzt.

*{margin:0; padding:0;}

Hinweis Sie können auch eine Reset-CSS-Datei herunterladen, wenn Sie auch möchten.

normalize.css oder reset.css

Quelle

2012-11-02 15:17:41 BuiltInOneDay

Ich habe meine Antwort bearbeitet. Es sind keine Ränder oder Polsterungen. Es ist eine Browser-Eigenart, würde ich sagen. – Francisc

würde ich auch bei Leerzeichen aussehen als mögliche Täter und Test mit font-size: 0.

Quelle

2012-11-02 15:54:37 Henrik

Das ist eine gute Idee. Ich werde das nächste Woche versuchen. Vielen Dank. – Francisc

Die Antwort dieser Frage gelöst mein Problem: CSS Table Cell In Chrome

Sie empfehlen table-layout: fixed das Element hinzugefügt, wo Sie display: table angewandt haben.

Wenn Ihr Markup die .clearfix Hack nicht angewendet hat, wie mein Fall war, könnte dies Ihnen helfen!

Quelle

2015-06-08 21:16:57

ich dieses Problem wieder im Jahr 2015 bemerkt habe - es ist nur Google Chrome und die einzige Art und Weise zu beeinflussen, es zu beheben ist Ihre Anzeige zu bewegen: Tabelle zu einem untergeordneten Container, so dass, wenn Sie haben:

<div style="width:50%; height:300px; display:table"> 
    <div style="display:table-cell; vertical-align: middle;"> 
      <p>Your centred content here</p> 
    </div> 
</div>

ändern sie ihn auf der folgenden Hinzufügen eines weiteren div:

<div style="width:50%;"> 
    <div style="display:table; height:300px;"> 
      <div style="display:table-cell; vertical-align: middle;"> 
       <p>Your centred content here</p> 
      </div> 
    </div> 
</div>

es sieht aus wie in google chrome gibt es einen Konflikt mit der Breite und display: table, wenn es auf den gleichen Tag angewendet wird.

Öffnen Sie den folgenden Link in Chrome und Firefox und Sie werden sehen, dass die rechten Grenzen in Firefox ausrichten, aber nicht in Chrom, weil es 1px zusätzliche Lücke hinzufügt.

Lange Rede kurzer Sinn, meine Korrektur funktioniert in Chrom :)

https://jsfiddle.net/2u1t8ffj/

Quelle

2017-06-22 09:08:04 Mike

CSS-Anzeige: Tabelle; Abstandsproblem auf Chrom

Antwort

Verwandte Themen