Hiển thị CSS: bảng; vấn đề khoảng cách trên Chrome

Question

Tôi đang sử dụng display:table; trên một yếu tố div. Trên tất cả các trình duyệt khác mà tôi đã thử nghiệm, không có vấn đề gì. Tuy nhiên, trên Chrome 22 (mới nhất) và Canary, các div nhận được khoảng cách 1px ở cả hai bên trái và bên phải.

Bất kỳ ý tưởng nào về sự cố xảy ra?

EDIT:
margin, border, padding đều 0.

Ngoài ra, bất kỳ thuộc tính bảng được loại bỏ:

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

Answer 1

Tôi đã gặp vấn đề tương tự. Nó được gây ra bởi Micro clearfix hack. Đã xóa kiểu .clearfix đã giải quyết sự cố.

Answer 2

tôi sẽ thiết lập lại margin và padding trên tất cả các trình duyệt.

*{margin:0; padding:0;} 

Lưu ý bạn cũng có thể tải xuống tệp css đặt lại nếu bạn muốn.

normalize.css hoặc reset.css

Answer 3

tôi cũng sẽ nhìn vào khoảng trắng như một người phạm tội có thể và thử nghiệm với font-size: 0.

Answer 4

Câu trả lời từ câu hỏi này giải quyết vấn đề của tôi: CSS Table Cell In Chrome

Họ khuyên bạn nên thêm table-layout: fixed đến các yếu tố mà bạn đã áp dụng display: table.

Nếu đánh dấu của bạn không bị hack .clearfix, như trường hợp của tôi, điều này có thể giúp bạn!

Answer 5

tôi đã nhận thấy vấn đề này trở lại vào năm 2015 - nó chỉ ảnh hưởng đến google chrome và cách duy nhất để sửa chữa nó là để di chuyển màn hình của bạn: bảng để một container đứa trẻ, vì vậy nếu bạn có:

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

Thay đổi nó thành sau đây để thêm một div khác:

<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> 

Có vẻ như trong google chrome có xung đột với chiều rộng và hiển thị: bảng khi nó được áp dụng cho cùng một thẻ.

Mở liên kết sau trong cả chrome và firefox và bạn sẽ thấy rằng các đường viền bên phải sắp xếp trong firefox nhưng không ở trong chrome vì nó thêm khoảng cách thêm 1px.

câu chuyện dài ngắn, sửa chữa của tôi làm việc trong chrome :)

https://jsfiddle.net/2u1t8ffj/