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. git 常用命令(不定期更新)

    过程写写吧,总是忘记.1,在一个文件夹下 键入 git init ,使之成为Git可以管理的仓库.2,编写一个文件readme.txt.3,把文件添加到仓库 git add readme.txt4,把 ...

  2. HttpServletRequest和ServletRequest的区别以及HttpServletRequest对象方法的用法

    HttpServletRequest和ServletRequest都是接口 HttpServletRequest继承自ServletRequest HttpServletRequest比Servlet ...

  3. Elasticsearch java API (23)查询 DSL Geo查询

    地理查询编辑 Elasticsearch支持两种类型的地理数据: geo_point纬度/经度对字段的支持,和 geo_shape领域,支持点.线.圆.多边形.多等. 这组查询: geo_shape  ...

  4. javascript 模块依赖管理的本质

    模块模式定义 模块是'javascript'的一种设计模式,它为函数定义一个包装函数,并且该包装函数的返回值与模块的API保持一致: function createModule() { functio ...

  5. python学习笔记07-元组 字典

    元组: 元组里面的元素不可修改  创建后只可读  不可写 一个元素的时候 在后面加一个逗号 字典: 无序的 Python 中唯一的映射类型 采用键值对的形式存储数据 key必须是可哈希的  可哈希表示 ...

  6. Vim编辑器与shell脚本

      目录                                                          Vim文本编辑器 Shell脚本 Shell编程变量 流程控制语句 计划任务 ...

  7. 【BZOJ1069】【SCOI2007】最大土地面积

    题目大意:给定有n个点的点集,求该点集中任意四个点所构成的四边形中面积最大四边形的面积. 我们不难想到(不难yy出来),面积最大的四边形的四个顶点一定所给定的点集所构成的凸包上.我们求出给定点集的集合 ...

  8. Oracle 数据库维护管理之--数据库基本信息表管理与优化参考1

    1.查看当前系统中的会话(如果权限不足,请使用sys或者system用户登录): select * from v$session t; 2.查看此会话下正在执行的sql语句:select sql_te ...

  9. Springboot 打jar包分离lib，配置文件正确方式（二）

    Springboot 打jar包分离lib,配置文件正确方式(二) 背景 从<Springboot 打jar包分离lib,配置文件正确方式>中,可以达到把配置文件和依赖第三方的jar包分离 ...

  10. 关于component-scan中base-package包含通配符的问题探究

    http://blog.csdn.net/u012325167/article/details/75388990 今天在配置Spring的component-scan时,发现了一个有趣的问题.就是在指 ...