声明：web小白的笔记，欢迎大神指点！联系QQ：1522025433.

ie7 下 float换行问题

请直接看代码中和代码中的注释：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>IE7,浮动换行问题</title>

<style type="text/css">

    .float-right {

        float: right;

    }

/*    仅用于test3*/

    .float-left {

        float: left;

    }

</style>

</head>

<body>

<!--我右浮动  会在  我不浮动  的下一行右浮动显示-->

<div class="test1">我不浮动<span class="float-right">我右浮动</span></div>

<!--改变一下html结构，就可以结局此问题，可以先让浏览器浮动渲染 浮动元素。-->

<div class="test2"><span class="float-right">我右浮动</span>我不浮动</div>

<!--或则可以给  我不浮动 包上一span标签，然后让他 左浮动也可以达到效果-->

<div class="test3"><span class="float-left">我不浮动</span><span class="float-right">我右浮动</span></div>

</body>

</html>

我们想要的效果是这样显示：

我不浮动------------我右浮动。（-- 代表空格）

ie7 下内联（行内）元素 vertical-align：middle; 失效问题

代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>ie7兼容问题</title>

<style type="text/css">

    .index-banner-text .text-info .line {

        display: inline-block;

        width: 40px;

        color: #fff;

        background-color: #b3b3b3;

        border-top: 1px solid #fff;

        vertical-align: middle;

    }

</style>

</head>

<body>

    <div class="index-banner-text">

        <p class="text-info">

            <i class="line line-l"></i>

            <span class="txt">resto restaurant home page website template</span>

            <i class="line line-r"></i>

        </p>

    </div>

</body>

</html>

IE7下效果图：

此问题的解决可以给margin-top或margin-bottom取适当的值。实现居中。

但是要把属性前面，加上    *   号；不然ie7下虽然居中了，其他浏览器就尴尬了。因为加上 * 号后，只有在ie7即以下版本才被解析！

可以这样修改上面css样式！

    .index-banner-text .text-info .line {

        display: inline-block;

        width: 40px;

        color: #fff;

        background-color: #b3b3b3;

        border-top: 1px solid #fff;

        vertical-align: middle;

        *margin-top: 10px;/*只在IE7下解析*/

    }

IE7下效果图：

好就是这样！

默默祈祷早点淘汰掉低版本的IE吧！哈哈哈哈

参考视频地址一：http://www.imooc.com/video/11959

参考视频地址二：http://www.imooc.com/video/11960

ie7 下 float换行问题与vertical-align：middle; 失效问题的更多相关文章

  1. 解决ie6、ie7下float为right换行的情况

    IE6下有不少奇怪的Bug,今天就碰到一个,float:right换行bug,情况是并列的几个块级元素如div和span,一些设置了左浮动一些设置右浮动,一行的宽度足够放下所有的块级元素,但此时ie6 ...

  2. vertical-align及IE7下的inline-block

    在IE7下,是不支持inline-block元素的,当对块级元素如dl进行inline-block样式设置时,在IE7浏览器是下样式是不会生效的. 若要在IE7下实现将块级元素设置为内联元素,可以这样 ...

  3. 【css】ie6 和 ie7 下 position 与 overflow 的问题

    前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...

  4. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  5. IE6/IE7下：inline-block解决方案

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  6. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  7. IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  8. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

  9. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

随机推荐

  1. Telnet的三种登录方式

    Telnet的三种登录方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.华为创建telnet的三种验证方式 首先,我们可以简单的看一个拓扑图,让我们可以在亦庄的路由器上对双桥 ...

  2. 9、JPA-映射-双向多对多

    实体类 Category package com.jpa.yingshe; import java.util.HashSet; import java.util.Set; import javax.p ...

  3. 学习windows编程 day3 之窗口绘画一：点线绘制

    #include <windows.h> #include <math.h> LRESULT CALLBACK WndProc(HWND hwnd, UINT message, ...

  4. Log4net（一）-——配置文件

    一.Log4Net框架介绍 Log4net 是 Apache 下一个开放源码的项目,它是Log4j 的一个克隆版.Log4net中定义了多种日志信息输出模式.它可以根据需要将日志输出到控制台,文本文件 ...

  5. JAVA-大白话探索JVM-类加载过程（二）

    首先我们知道JVM是什么以及类加载器的作用 不清楚的可以看看JAVA-大白话探索JVM-类加载器(一) 现在我们来摸索下类的加载过程 首先,我们将类加载过程分为三步走 装载 链接 初始化 其中 链接 ...

  6. Codeforces 590D Top Secret Task

    D. Top Secret Task time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  7. groovy.lang.GroovyRuntimeException: Conflicting module versions

    在运行groovy的junit方法时,报了这个错误: java.lang.ExceptionInInitializerError at org.codehaus.groovy.reflection.C ...

  8. Uva439：BFS题目总结

    #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <cstring> #include <cstd ...

  9. buildroot构建项目（二）--- u-boot 2017.11 建立 2440 开发板

    一.准备工作 在建立之前,先需要将下载的u-boot 拷贝一份出来解压,在此工程下进行更改和创建.同时根据前面搜索到的 mini2440开发板所在的版本,下载一份u-boot 拷贝出 mini2440 ...

  10. C++ 中 #ifndef, #define, #endif 宏定义

    目的:为了保证包含的内容只被程序(include) 和编译了一次.判断预处理器常量是否已被定义. 预编译将所有头文件(#include"XXX.h")用头文件中的内容来替换,头文件 ...