修复IE7浮动元素自动换行的bug

  1. bug重现以及修复后的表现

　　　　

　　2. HTML源码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IE7浮动元素自动换行的bug</title>
    <style>
        .g-red{color:red;}
        .g-green{color:green;}
        .w255{width:255px;}
        .w400{width: 400px;}
        .fl{float:left;}
        .pre{white-space:pre;}
    </style>
</head>

<body>
<label class="g-red">bug出现的情景：</label>
<br><br>
<div class="w400">
    <div class="fl">bug出现需符合以下两种情况:</div>
    <div class="fl">1:浮动元素父元素的宽度必须固定</div>
    <div class="fl">2:浮动元素的宽度不固定，靠内容撑开</div>
</div>
<br><br><br><br>
<label class="g-green">修复bug出现方法：</label>
<br><br>
<div class="w400">
    <div class="fl pre">bug出现需符合以下两种情况:</div>
    <div class="fl pre">1:浮动元素父元素的宽度必须固定</div>
    <div class="fl pre">2:浮动元素的宽度不固定，靠内容撑开</div>
</div>
<br><br>
<div class="w400">
    <div class="fl w255">修复bug的第一种方法</div>
    <div class="fl w255">给浮动元素固定好一个宽度</div>
</div>
<br><br>
<div class="w400">
    <div class="fl pre">修复bug的第二种方法</div>
    <div class="fl pre">给浮动元素添加white-space的样式:white-space:pre</div>
</div>
</body>
</html>

 

posted @ 2017-04-23 16:22  欧欧欧锋_  阅读(801)  评论(0)  编辑  收藏  举报