声明：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. Hadoop生态圈-Oozie实战之调度shell脚本

    Hadoop生态圈-Oozie实战之调度shell脚本 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客展示案例:使用Oozie调度Shell脚本. 1>.解压官方案例 ...

  2. java RSA 加签验签【转】

    引用自: http://blog.csdn.net/wangqiuyun/article/details/42143957/ java RSA 加签验签 package com.testdemo.co ...

  3. 机器学习课程-第8周-聚类(Clustering)—K-Mean算法

    1. 聚类(Clustering) 1.1 无监督学习: 简介 在一个典型的监督学习中,我们有一个有标签的训练集,我们的目标是找到能够区分正样本和负样本的决策边界,在这里的监督学习中,我们有一系列标签 ...

  4. crosstab(unknown, unknown) does not exist

    在pgadminIII用到交叉表时,给报了函数不存在 解决方法: 执行sql CREATE EXTENSION tablefunc; 结果 Query returned successfully wi ...

  5. python自带的调试器

    python是自带调试器的. 比如你写了一个python程序,名叫test.py. 你想调试一下这个程序,你可以执行 python -m pdb test.py,就会进入test.py的调试. 想查看 ...

  6. oracle sum(x) over( partition by y ORDER BY z ) 分析

    之前用过row_number(),rank()等排序与over( partition by ... ORDER BY ...),这两个比较好理解: 先分组,然后在组内排名. 今天突然碰到sum(... ...

  7. MySQL5.7使用错误解决：ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)【取消或重设root密码】

    解决方法: 最简单方法: ⑴打开mysql中的my.ini(如果没有就将my-default.ini复制一份,并修改为my.ini): ⑵在[mysqld]下面空白行直接添加skip-grant-ta ...

  8. jquery 学习(六) - 事件绑定

    HTML <!--绑定事件--> <div class="a1"> <button class="bt">按钮</bu ...

  9. SpringBoot常用Starter介绍和整合模板引擎Freemaker、thymeleaf 4节课

    1.SpringBoot Starter讲解 简介:介绍什么是SpringBoot Starter和主要作用 1.官网地址:https://docs.spring.io/spring-boot/doc ...

  10. 【ARTS】01_10_左耳听风-20190114~20190120

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...