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>

修复IE7浮动元素自动换行的bug的更多相关文章

  1. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  2. [ie兼容]ie7浮动左在前，浮动右在后导致右边浮动的元素掉下来

    解决办法:左浮动和右浮动元素在结构上互换位置 http://blog.sina.com.cn/s/blog_818a1e5b0100wp5b.html

  3. CSS浮动元素的水平居中

    方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  4. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  5. CSS 教程 - 闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...

  6. IE6下绝对定位元素和浮动元素并列绝对定位元素消失

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JQuery UI中的Tabs与base元素摩擦的BUG

    JQuery UI中的Tabs与base元素冲突的BUG 以前一直使用jquery-ui-1.8,最近打算试一下目前最新的版本1.11.但对于Tabs,页面是乱的,怎么也不正常.折腾了好几个小时,最后 ...

  8. bfc与浮动元素的关系

    首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...

  9. 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...

随机推荐

  1. 运行安装mysql 报错 [root@localhost mysql-mult]# ./scripts/mysql_install_db  --defaults-file=conf/3306my.cnf FATAL ERROR: please install the following Perl modules before executing ./scripts/mysql_install_

    运行安装mysql 报错 [root@localhost mysql-mult]# ./scripts/mysql_install_db  --defaults-file=conf/3306my.cn ...

  2. 《JAVA与模式》之桥梁模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述桥梁(Bridge)模式的: 桥梁模式是对象的结构模式.又称为柄体(Handle and Body)模式或接口(Interface)模式. ...

  3. D11——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D11 20180908内容纲要: 1.RabbitMQ消息队列 (1)RabbitMQ安装 (2)Rabbits示例 模式一:fanout 模式二:direct ...

  4. 验证resneXt，densenet，mobilenet和SENet的特色结构

    简介 图像分类对网络结构的要求,一个是精度,另一个是速度.这两个需求推动了网络结构的发展. resneXt:分组卷积,降低了网络参数个数. densenet:密集的跳连接. mobilenet:标准卷 ...

  5. [webrtc] 强制使用tcp传输

    以前笔记,整理 webrtc默认使用UDP传输,但是也可以通过TCP传输. 使用tcp传输,需要服务器中转,turnserver,licode,janus之类的服务器. 1. 如果使用turnserv ...

  6. SpringAOP-基于@AspectJ的简单入门

    一.AOP的基本概念: 连接点(Jointpoint):表示需要在程序中插入横切关注点的扩展点,连接点可能是类初始化.方法执行.方法调用.字段调用或处理异常等等,Spring只支持方法执行连接点,在A ...

  7. 【数组】Rotate Image

    题目: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwis ...

  8. Android 开发工具类 12_PullXmlTools

    xml 格式数据 <?xml version="1.0" encoding="UTF-8"?> <user-list> <user ...

  9. Java基础知识01

    1. String,StringBuffer和StringBuilder的区别? String:final修饰,String对象创建后不可修改:StringBuffer和StringBuilder对象 ...

  10. HUE配置文件hue.ini 的yarn_clusters模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...