Clearfix 在 chrome 43 中不工作
Clearfix not working in chrome 43
我已经创建了 3 个浮动列，我正在尝试使用 clearfix hack，但没有任何版本适合我。
我正在 Chrome 43 查看我的网站，它看起来像这样：
http://screencast.com/t/Dkenkh3Jq8SD
但是在 firefox 和 ie 上看起来还不错。
A link 到我的站点：
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/
在所有映像 div 容器上使用 float: left;。
正如@Cbroe 在上面的评论中所述
Unclear what you’re asking; both your fiddle and your actual site look
the same in my Chrome 43 as in IE 11 and 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 个为您简化的选项（可能会解决您遇到的问题 - 但我们不能 "see"）
仅使用 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>
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!!!
我已经创建了 3 个浮动列，我正在尝试使用 clearfix hack，但没有任何版本适合我。
我正在 Chrome 43 查看我的网站，它看起来像这样： http://screencast.com/t/Dkenkh3Jq8SD
但是在 firefox 和 ie 上看起来还不错。
A link 到我的站点： 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/
在所有映像 div 容器上使用 float: left;。
正如@Cbroe 在上面的评论中所述
Unclear what you’re asking; both your fiddle and your actual site look the same in my Chrome 43 as in IE 11 and 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 个为您简化的选项（可能会解决您遇到的问题 - 但我们不能 "see"）
仅使用 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>
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!!!