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

最新推荐文章于 2021-05-31 11:44:27 发布

weixin_30470857

最新推荐文章于 2021-05-31 11:44:27 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/oufeng/p/6752924.html

版权

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>

转载于:https://www.cnblogs.com/oufeng/p/6752924.html

weixin_30470857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
修复IE7浮动元素自动换行的bug

bug重现以及修复后的表现　　　　　　2. HTML源码<!doctype html><html><head> <meta charset="utf-8"> <title>IE7浮动元素自动换行的bug</title> <style> ...
复制链接

扫一扫