không gian dọc trong IE sau div rõ ràng

Tôi đã tạo ra một mạng lưới đơn giản của divs bởi trái nổi họ và một div trống với một rõ ràng ở phần cuối của mỗi hàng.không gian dọc trong IE sau div rõ ràng

Tính năng này hoạt động tốt trong Firefox, nhưng trong IE, tôi nhận thêm không gian dọc giữa các hàng. Tôi đã cố gắng áp dụng phương pháp "clearfix", nhưng tôi phải làm điều gì đó sai.

Tại sao IE chèn thêm không gian dọc và làm thế nào tôi có thể thoát khỏi nó?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style> 
     root { 
      display: block; 
     } 

     body { 
      background: white; 
     } 

     .colorChip { 
      position:relative; 
      float: left; 
      width: 20px; 
      height: 20px; 
      margin: 2px; 
      border-style: solid; 
      border-width: 1px; 
      border-color: black; 
     } 

     .clear { 
      clear: both; 
     } 

     .clearfix { 
      display:inline-block; 
     } 

     .clearfix:after, .container:after { 
      clear:both; 
      content:"."; 
      display:block; 
      height:0; 
      visibility:hidden; 
     } 

     * html .clearfix { 
      height:1%; 
     } 
     .clearfix { 
      display:block; 
     } 

    </style> 
    <!--[if IE]> 
<style type="text/css"> 
    .clearfix { 
    zoom: 1;  /* triggers hasLayout */ 
</style> 
<![endif]--> 

    </head> 

    <body> 
    <div class="colorChip clearfix" style="background: rgb(163,143,88)"></div> 
    <div class="colorChip" style="background: rgb(190,170,113)"></div> 
    <div class="colorChip" style="background: rgb(190,250,113)"></div> 
    <div class="clear"></div> 
    <div class="colorChip clearfix" style="background: rgb(187,170,128)"></div> 
    <div class="colorChip" style="background: rgb(215,197,154)"></div> 
    <div class="colorChip" style="background: rgb(243,225,181)"></div> 
    <div class="clear"></div> 
    <div class="colorChip clearfix" style="background: rgb(104,94,68)"></div> 
    <div class="colorChip" style="background: rgb(129,118,92)"></div> 
    <div class="colorChip" style="background: rgb(155,144,116)"></div> 
    <div class="clear"></div> 
    </body> 
</html>

Nguồn

2009-01-23 lajos

IE là một chút hài hước khoảng trống <div> s - nó thích cho họ chiều cao của một dòng văn bản.

Nếu bạn thay đổi .clear vào đó, nó sẽ co lại để 1 pixel:

.clear { 
     clear: both; 
     height: 1px; 
     overflow: hidden; 
    }

Đặt một màu nền trên để xem những gì đang xảy ra

Nguồn

2009-01-23 15:14:33 Greg

Greg thanks a lot, nó đã cứu tôi rất nhiều thời gian. – kobe

.clear { 
    clear: both; 
    height: 0px; 
    overflow: hidden; 
}

Thay đổi nó để 0px hoạt động tốt hơn ..

Nguồn

2009-03-17 12:31:21

Nếu không có nó nó hoạt động trong IE6, nhưng không IE7, với nó nó hoạt động trong IE7, nhưng cho biết thêm chiều cao trong IE6. Không có từ nào để mô tả hận thù của tôi đối với trình duyệt này.

Nguồn

2010-01-28 14:07:41 Polygon

Hãy xem ở đây quá: http://nadirnasir.blogspot.com/2009/04/ie-blank-space-after-img-tag-fix.html

Nguồn

2011-03-11 10:21:55

Chiều cao: 0px không làm việc cho tôi trong IE 8. Ngoài ra, tôi không muốn có một chiều cao của 1px, bởi vì sau đó sẽ có một dòng trắng 1px qua div của tôi với một nền màu xám, và tôi không muốn thiết lập một màu nền đặc biệt cho mỗi thể hiện của một class = div "rõ ràng". Tôi đã thử chiều cao dòng: 0; và nó làm việc rất lớn trong IE8, IE7 và IE6 (Tôi không quan tâm đến bất cứ điều gì lớn hơn mà) và FF 3.6, không có không gian dọc additonal đã được bổ sung.

 
.clear { 
    clear: both; 
    line-height: 0; 
    overflow: hidden; 
}

Nguồn

2011-03-17 13:35:55 bmarti44

Tôi có vấn đề này với IE8 và sử dụng sau

.clear 
{ 
    clear:both; 
    height:0; 
    width:0; 
    margin:0; 
    padding:0; 
    line-height:0; 
    overflow: hidden; 
    font-size:0px; 
}

Nguồn

2011-05-18 07:57:44

không gian dọc trong IE sau div rõ ràng

Trả lời

Các vấn đề liên quan