声明：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. 函数和常用模块【day06】：subprocess模块（十）

    本节内容 1.概述 2.前言 3.subprocess模块 4.subprocess.Popen() 一.概述 我们在实际的工作中,需要跟操作系统的命令做交互,但我们如何用python去跟操作系统之间 ...

  2. .Net进阶系列(15)-异步多线程(线程的特殊处理和深究委托赋值)（被替换）

    1. 线程的异常处理 我们经常会遇到一个场景,开启了多个线程,其中一个线程报错,导致整个程序崩溃.这并不是我们想要的,我需要的结果是,其中一个线程报错,默默的记录下,其它线程正常进行,保证程序整体可以 ...

  3. 【转】LR分析法

    转自:http://guanjy0129.blog.163.com/blog/static/1115494452010614113333509/ LR分析法的归约过程是规范推导的逆过程,所以LR分析过 ...

  4. C++中的memset、zeroMemory和={0}操作（ 转）

    使用C/C++编程时,常使用ZeroMemory.memset或 “={0}”来对结构体对象进行初始化或清零.然而这三种方式都有各自的特点,使用时需谨慎,否则容易出现严重错误,本人今日解决一个导致宕机 ...

  5. Java SE之浅谈JDK SDK JRE

    JDK(Java Development Kit):   1.定义:编写Java程序的程序员使用的软件开发工具包,又被称为Java SDK (Java Software Development Kit ...

  6. UE4的AI学习（1）——基本概念

    AI学习当中,不学习行为树基本概念就不能明白具体实例中的操作意义,但是没有经过具体实例实验,又觉得基本概念抽象难以理解.建议先泛读(1)(2)后再对具体的细节进行死磕,能较深的理解行为树的具体概念.第 ...

  7. $PollardRho$ 算法及其优化详解

    \(PollardRho\) 算法总结: Pollard Rho是一个非常玄学的算法,用于在\(O(n^{1/4})\)的期望时间复杂度内计算合数n的某个非平凡因子(除了1和它本身以外能整除它的数). ...

  8. magelinux（0111）

    Web Service 应用层:http, https 实现某类具体应用: 传输层协议:TCP, UDP, SCTP IANA: 0-1023:众所周知,永久地分配给固定的应用使用,特权端口: 102 ...

  9. Linux CentOS 服务器搭建与初始化配置图文详解

    这几天对服务器兴趣贼为浓厚,在虚拟机上装了一个CentOS7玩了玩,遇到过很多问题,比如网卡驱动设置,不能ping 等等问题,然后掏钱买个ECS搭服务器玩玩,下面就开始谢谢我的心路历程吧. 首先 买服 ...

  10. Linux关机&重启命令

    ⒈shutdown ①shutdown -h now 立即关机 ②shutdown -h 1 1分钟后关机 ③shutdown -r now 立即重启 ⒉halt 立即关机 ⒊reboot 立即重启 ...