声明：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生态圈-基于yum源的方式部署Cloudera Manager5.15.1

    Hadoop生态圈-基于yum源的方式部署Cloudera Manager5.15.1 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我之前分享过关于离线方式部署Cloudera ...

  2. 创建 elasticsearch 用户

    创建 elasticsearch 用户 groupadd -g 3048 elasticsearch useradd -s /sbin/nologin -u 3048 -g elasticsearch ...

  3. vuex2.0源码分析

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...

  4. plt.scatter(X[0, :], X[1, :], c=Y, s=40, cmap=plt.cm.Spectral)出错

    ValueError: c of shape (1, 400) not acceptable as a color sequence for x with size 400, y with size ...

  5. java中常用的包及作用

    1. java.awt:提供了绘图和图像类,主要用于编写GUI程序,包括按钮.标签等常用组件以及相应的事件类. 2. java.lang:java的语言包,是核心包,默认导入到用户程序,包中有obje ...

  6. 关闭MySQL数据库的几种方法

    #1.使用mysqldadmin mysqladmin -uroot -p shutdown mysqladmin -u ${mysql_user} -p${mysql_pwd} -S /data/$ ...

  7. Java——Struts2 之国际化 struts.custom.i18n.resources=globalMessages

    1.在src下 建立 struts.properties 文件,内容为:struts.custom.i18n.resources=globalMessages struts.custom.i18n.r ...

  8. Linux 重启网卡失败 Job for network.service failed because the control process exited with error code. See "systemctl status network.service" and "journalctl -xe" for details.

    linux下重启网卡使用命令 : service network restart 时报错: [root@slave01 hadoop]# service network restart Startin ...

  9. fcn16s

  10. dense prediction

    Dense prediction  fully convolutional network for sementic segmentation 先用feature extractor 提特征,然后再使 ...