Clearfix在chrome 43中不起作用

Question

我创建了3个浮动列，我正在尝试使用clearfix hack，但是没有任何版本适用于我。

我在Chrome 43上查看我的网站，它看起来像这样： http://screencast.com/t/Dkenkh3Jq8SD

但是在Firefox上，它看起来很好。

指向我网站的链接： http://idanmelamed.co.il/peppers-studio/

这是我的代码： http://jsfiddle.net/2zaeL9tk/

HTML：

<div class="main-content group">
    <div class="column-right col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
      <p>Peppers Studio בהנהלת  איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>         
    </div>
    <div class="column-center col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
       <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
    </div>
    <div class="column-left col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
       <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
    </div>     
  </div>

CSS：

    .main-content img {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
  }

  .column-right { 
    float: right; 
    width: 33.3333%;
  }

  .column-center { 
    display: inline-block; 
    width: 33.3333%; 
  }

  .column-left{
    display: block;
    float: left; 
    width: 33.3333%; 
  }

  .col {
    text-align: center;
  }

  .group::after {
  content: " ";
  display: table;
  clear: both;
  }

有关如何解决此问题的任何想法？

编辑： 以下是不同浏览器的一些屏幕截图： http://browsershots.org/http://idanmelamed.co.il/peppers-studio/

Answer 1

正如@Cbroe在上面的评论中所述

  

不清楚你在问什么;你的小提琴和你的实际网站看起来   在我的Chrome 43中与在IE 11和Firefox 38中一样

我在Chrome 43和Firefox 38中都尝试过，两者看起来都一样。

虽然我注意到您正在使用.col float:left和float:right以及display:inline-block，但是当您可以简化时，它会混合很多。

而不是这个

 .column-right {
     float: right;
     width: 33.3333%;
 }
 .column-center {
     display: inline-block;
     width: 33.3333%;
 }
 .column-left {
     display: block;
     float: left;
     width: 33.3333%;
 }
 .col {
     text-align: center;
}

以下是3个为您简化的选项（可能会解决您遇到的问题 - 我们无法“看到”）

仅使用float:left

 .main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   float:left;
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

仅使用display:inline-block

.main-content {
  font-size:0 /*fix inline-block gap*/
}
.main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   display:inline-block;
   vertical-align:top; /*optional*/
   font-size:16px;
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

使用display:table-[cell]

.main-content {
  display:table;
  table-layout:fixed;
  width:100%;
}
.main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   display:table-cell;
   vertical-align:top; /*optional*/
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

Answer 2

在所有图片float: left;容器上使用div。

Answer 3

Roflmyeggo的答案给了我一个角度，我找到了解决方案......

我把我的所有列都放到了正确的位置，左列现在保持原样。

基本上我改变了我的css：

.column-right {  
    width: 33.3333%;
  }

  .column-center { 
    width: 33.3333%; 
  }

  .column-left{
    display: block;
    width: 33.3333%; 
  }

  .col {
    text-align: center;
    float: right;
  }

  .group::after {
  content: " ";
  display: table;
  clear: both;
  }

谢谢Roflmyeggo !!!