Wyświetlanie CSS: tabela; Problem dotyczący odstępów w przeglądarce Chrome

Question

Używam elementu display:table; na elemencie div. We wszystkich innych przeglądarkach, które przetestowałem, nie ma problemów. Jednak na Chrome 22 (najnowszy) i Canary, div otrzymuje odstępy 1px po lewej i prawej stronie.

Każdy pomysł, gdzie leży problem?

EDIT:
margin, border, padding są 0.

Również wszelkie właściwości tabeli są usuwane:

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

Answer 1

Miałem ten sam problem. Zostało to spowodowane przez Micro HF. Usunięto styl .clearfix rozwiązany problem.

Answer 2

chciałbym zresetować margines i padding na wszystkich przeglądarkach.

*{margin:0; padding:0;} 

Uwaga: możesz również pobrać plik css do resetowania, jeśli chcesz.

normalize.css lub reset.css

Answer 3

Chciałbym również spojrzeć na spacji jako ewentualnego sprawcy i test z font-size: 0.

Answer 4

Odpowiedź z tym pytaniem rozwiązać mój problem: CSS Table Cell In Chrome

table-layout: fixed one zalecamy dodanie do elementu, w którym zastosowaliśmy display: table.

Jeśli twój znacznik nie ma zastosowanego hakera .clearfix, tak jak w moim przypadku, może ci to pomóc!

Answer 5

Zauważyłem ten problem z powrotem w 2015 roku - ma on wpływ tylko Google Chrome, a jedynym sposobem, aby naprawić to, aby przenieść swój wyświetlacz: stół do pojemnika dzieci, więc jeśli masz:

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

zmienić je na poniższych dodając jeszcze jeden 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> 

to wygląda jak w google chrome nie ma konfliktu z szerokością i display: table, gdy jest stosowane do tego samego znacznika.

Otwórz poniższy link zarówno w chrome, jak i Firefoksie, a zobaczysz, że prawe ramki wyrównują się w firefoxie, ale nie w chrome, ponieważ dodaje 1px dodatkową lukę.

Krótko mówiąc, moja poprawka działa w chrome :)

https://jsfiddle.net/2u1t8ffj/