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. JavaScript函数学习总结(一)---函数定义

    博客原文地址:Claiyre的个人博客 如需转载,请在文章开头注明原文地址 在许多传统的OO语言中,对象可以包含数据,还可拥有方法,也就是属于该对象的函数.但在JavaScript中,函数也被认为是一 ...

  2. [Swift实际操作]七、常见概念-(3)尺寸CGSize的使用详解

    本文将为你演示CGSize的使用 首先导入需要使用到的两个框架 import UIKit import QuartzCore 定义一个尺寸对象,尺寸对象包含宽度和和高度两个参数.从右侧的结果可以看出, ...

  3. Swinject 源码框架(三）：Object Scopes

    Object Scopes 指定了生成的实例在系统中是如何被共享的. 如何指定 scope container.register(Animal.self) { _ in Cat() } .inObje ...

  4. Centos7永久修改IP地址

    Centos7永久修改IP地址 永久修改IP地址,即为设置静态的IP地址. 一.修改IP地址前需要准备的工作 1.虚拟机需要使用桥接的网络模式 虚拟机关机状态下,点击"编辑虚拟机设置&quo ...

  5. WebAPI Post接收数据

    近日在写某开源商城的webapi接口,由于刚接触所以碰到某些问题,如post数据的接收啊等.在网上查询资料时给出了三种方式. 1.给多个数据对象封装成一个对象进行接收([frombody]标签只能用于 ...

  6. POJ 1126

    #include <stdio.h> #include <string> #include <iostream> using namespace std; int ...

  7. HTTP请求头及其作用 转

    HTTP请求头Header及其作用详解 下面是访问的一个URL,http://www.hzau.edu.cn的一个header,根据实例分析各部分的功能和作用. 1.Accept,浏览器端能够处理的内 ...

  8. 剑指offer六十之按之把二叉树打印成多行

    一.题目 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行.二.思路 队列LinkedList完成层序遍历,用end记录每层结点数目 三.代码 import java.util.Arra ...

  9. 剑指offer四十八之不用加减乘除做加法

    一.题目 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 二.思路 1. 采用位运算的方法,分三步: (1).两个数异或:相当于每一位相加,而不考虑进位 (2).两个数 ...

  10. 剑指offer三十五之数组中的逆序对

    一.题目 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...