zoukankan      html  css  js  c++  java
  • 修复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>
  • 相关阅读:
    Android Studio下载gradle失败
    【宁熙】回望四月又七天
    caffe crnn windows上编译多标签分类版本
    图像识别方案的选择思考
    使用SVM进行图像识别的一些思考
    安卓usb串口免root调试
    交叉编译opencv移植到海思3518
    【2021-10-24】连岳摘抄
    【2021-10-23】人间词话
    【2021-10-22】梅兰芳
  • 原文地址:https://www.cnblogs.com/oufeng/p/6752924.html
Copyright © 2011-2022 走看看