声明：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. Hibernate的实体类中为什么要继承Serializable？

    确切的说应该是对象的序列化,一般程序在运行时,产生对象,这些对象随着程序的停止运行而消失,但如果我们想把某些对象(因为是对象,所以有各自 不同的特性)保存下来,在程序终止运行后,这些对象仍然存在,可以 ...

  2. Hi3519v101-uboot-start.S分析

    00032: #include <config.h>00033: #include <version.h> 1)#include <config.h>.config ...

  3. ivew实现table的编辑保存追加删除

    ivew实现table的编辑 例子1 例子2

  4. impala记录-安装kudu和impala

    1.配置/etc/yum.repos.d clouder-kudu.repo [cloudera-kudu]# Packages for Cloudera's Distribution for kud ...

  5. [转]Maven与nexus

    开始在使用Maven时,总是会听到nexus这个词,一会儿maven,一会儿nexus,当时很是困惑,nexus是什么呢,为什么它总是和maven一起被提到呢? 我们一步一步来了解吧. 一.了解Mav ...

  6. link 和@import 的区别

    两者都为外部引入css的方式. 他们的区别: 1.link属于HTML标签,而@import是css提供的 2.页面被加载时候,link会同时加载,而@import引入的文件会等到页面加载完成之后再进 ...

  7. 小程序Promise不支持finally解决方案

    小程序Promise不支持finally解决方案 代码片段 点击链接即可在微信开发者工具中查看代码wechatide://minicode/t2eidemj7P3X git地址 基本思路 小程序的Pr ...

  8. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  9. 【Python】Python-基础语法学习

    基础语法学习 果然学完 C++ 后再看其他语言的确有很多的共性,只需要熟悉一下python的独特语法和 C++ 中的差异就可以写出一些小的程序,而写得过程中也再次体会出python代码的精简和灵活: ...

  10. RNN（1） ------ “理解LSTM”（转载）

    原文链接:http://www.jianshu.com/p/9dc9f41f0b29 Recurrent Neural Networks 人类并不是每时每刻都从一片空白的大脑开始他们的思考.在你阅读这 ...