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. POST 400 (BAD REQUEST)

    遇到这种错,1,F12打开控制台,2,点击network,找到发送的请求. 3,点击请求,4,看右侧的 Header Preview Response 应该能找到原因. 就拿刚才来说,找了好几个小时原 ...

  2. Jmeter之Bean shell使用

    转载地址:http://www.cnblogs.com/puresoul/p/4915350.html 一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且 ...

  3. php-echo原理

    1.语法分析 unticked_statement: | T_ECHO echo_expr_list ';' ; echo_expr_list: echo_expr_list TSRMLS_CC); ...

  4. 【xsy1058】 单词 乱搞

    题目大意:给你$n$个长度为$m$的字符串,字符集仅为{x,y,z}三个字符,定义两个字符串$(s_i,s_j)$的相似度为$\sum_{k=1}^{m} [s_i[k]==s_j[k]]$. 从$0 ...

  5. Nginx Web服务(一)

    一.Nginx原理介绍 1.1:什么是Nginx Nginx是一个开源的,支持高性能.高并发的WWW服务和代理服务软件 1.2:Nginx的功能特点及应用场合 ① 支持高并发:能支持几万并发连接,特别 ...

  6. Zabbix3.2邮件告警python脚本

    一.概述及环境要求 1.概述 zabbix监控也起到重要作用,以下是使用python脚本发送告警邮件配置方法.之前使用过sendemail邮件报警但是发现邮件主题为中文时候会出现乱码的问题. 2.环境 ...

  7. 基于Web实现网络拓扑图

    想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留“制度”,But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来请教网络拓扑图的有关 ...

  8. Spring Security构建Rest服务-1001-spring social开发第三方登录之spring social基本原理

    OAuth协议是一个授权协议,目的是让用户在不将服务提供商的用户名密码交给第三方应用的条件下,让第三方应用可以有权限访问用户存在服务提供商上的资源. 接着上一篇说的,在第三方应用获取到用户资源后,如果 ...

  9. 第5章—构建Spring Web应用程序—SpringMVC详解

    SpringMVC详解 5.1.跟踪Springmvc的请求 SpringMVC的核心流程如下: 具体步骤: 第一步:发起请求到前端控制器(DispatcherServlet) 第二步:前端控制器请求 ...

  10. ubuntu安装maven

    1.安装maven前需要安装JDK 2.下载mavenapache-maven-3.3.9-bin.tar.gz 3.解压maven到当前目录tar -zxvf apache-maven-3.3.9- ...