css - Clearfix causes display error with Webkit

Question

I use a this CSS:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0
} 

to move things onto a new line. However, in Webkit, it causes a bunch of content to disappear and moves the box holding it to the bottom of the screen. The trick works correctly in IE and Firefox.

What am I doing wrong and how can I fix it?

Answer 1

问题可能出在您的代码中，我们看不到。但是尝试使用这个明确的修复。它每次都对我有用：

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

http://www.webtoolkit.info/css-clearfix.html