Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Micro clearfix hack breaks "white-space: pre-wrap"

Created by: PowerGamer1

Bootstrap uses http://nicolasgallagher.com/micro-clearfix-hack/ for a lot of its elements. This particular method of cleafixing introduces bugs when an element being clearfixed is set to white-space: pre-wrap.

For example, I need Bootstrap panel body to have a preformatted content, so I set a style: .panel-body { white-space: pre-wrap }. This makes Firefox 47.0.1 and Chrome 51.0.2704.106 (IE11 and Edge somehow are not affected) display extra spaces created by micro clearfix hack (those spaces are not supposed to exist or be visible on the page at all) at the top and bottom of panel body. As a result the panel body looks like it has an extra new line before and after "Panel body" text.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <style>
        .panel-body { white-space: pre-wrap }
    </style>
</head>
<body style="margin: 10px">
    <div class="panel panel-default">
        <div class="panel-heading">Panel title</div>
        <div class="panel-body">Panel        body</div>
    </div>
</body>
</html>

First screenshot is without .panel-body { white-space: pre-wrap } style, second screenshot with .panel-body { white-space: pre-wrap } style. normal pre-wrap