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. javaweb 项目的异常处理

    首先关于异常的分类: java 中关于异常的分类情况是:throwable 是所有异常和错误的基类,下面在分为Error 和 Exception: 简单的异常体系结构如下图所示: 其中Exceptio ...

  2. 初次学习Vue,输出Hello Vue!

    Vue.js作为目前比较流行的js框架,而我却迟迟没有接触,深感不安! 使用vue之前先要下载vue.js文件,然后在html里面导入vue.js文件,下面试着输出"Hello Vue!&q ...

  3. linux下shell脚本执行方法及exec和source命令

    exec和source都属于bash内部命令(builtins commands),在bash下输入man exec或man source可以查看所有的内部命令信息. bash shell的命令分为两 ...

  4. (转) python学习笔记6--fraction

    原文:https://blog.csdn.net/lemonwyc/article/details/37592883 fraction模块提供有关有理数的算术表达和计算,实际上就是分数的表达和计算.p ...

  5. 生成xml文件的步骤 -- XML的序列化器

    1. 初始化一个xml的序列化器 XmlSerializer serializer = Xml.newSerializer(); 2. 设置序列化器的参数 serializer.setOutput(o ...

  6. SPSS学习系列之SPSS Text Analytics是什么？

    不多说,直接上干货! IBM® SPSS® Text Analytics 是一个IBM® SPSS® Modeler 完全集成内插式插件,它采用了先进语言技术和Natural Language Pro ...

  7. OpenGL12-shader(GLSL)着色语言4-广告版的实现

    之前介绍了vertex shader的基本原理,现在我们来做一个简单的实践,在游戏中广告版(布告版) 随处可见,而且效率很高,现在我们就使用shader来实现这一过程,首先我们要知道布告版的原理 实际 ...

  8. markdown编辑器（颜色、大小、字体）

    <font face="黑体">我是黑体字</font> <font face="微软雅黑">我是微软雅黑</font ...

  9. Mongodb同步数据到hive（二）

    Mongodb同步数据到hive(二) 1.            概述 上一篇文章主要介绍了mongodb-based,通过直连mongodb的方式进行数据映射来进行数据查询,但是那种方式会对线上的 ...

  10. .NET环境下使用水晶报表

    .NET环境下使用水晶报表 听语音 | 浏览:3280 | 更新:2013-12-20 13:36 1 2 3 4 5 6 7 分步阅读 水晶报表(Crystal Reports)-商务智能软件,通常 ...