在IE7下,是不支持inline-block元素的,当对块级元素如dl进行inline-block样式设置时,在IE7浏览器是下样式是不会生效的。

若要在IE7下实现将块级元素设置为内联元素,可以这样进行设置:

*display:inline;

*zoom:1; //获取布局

在这样设置之后,就能继续设置其他的样式了。

很多时候,在IE7下将块级元素设置为内联元素时,我们可能会想到进行float浮动来实现,float了的元素是无法设置vertical-align的,因为vertical-align只适用于内联元素。

因此想要在IE7下完美实现将块级元素渲染成内联且bottom对齐,方法为:

*display:inline;

*zoom:1;

*vertical-align:bottom;

总结:

1)vertical-align适用于内联元素;

2)IE7下inline-block无效,需要用inline并且要获取到布局(如设置width,height,zoom等)。

vertical-align及IE7下的inline-block的更多相关文章

  1. text-align:center;在ie7下,父级加上会让block状态的子元素居中。

    text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.

  2. IE6/IE7下:inline-block解决方案

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

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

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

  4. 关于ie7下display:inline-block;不支持的解决方案

    关于ie7下display:inline-block:不支持的解决方案 今天码的时候遇到这个问题了. 如果本身是内联元素的,把它的display属性设置设置为inline-block时,所有浏览器都是 ...

  5. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  6. IE6/IE7下:inline-block不兼容的问题

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

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

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

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

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

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

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

随机推荐

  1. 十、Java基础---------面向对象之抽象类与接口

    抽象类(abstract)     当编写一个类时,时常会为该类定义一些方法,这些方法的使用用以描述该类的行为方式,那么这些方法都有具体的方法体.但是在某些情况下,某个父类只是知道子类应该包含怎样的方 ...

  2. css3属性之 box-sizing

    w3c plus上有详细介绍及原理http://www.w3cplus.com/content/css3-box-sizing,这里摘录其中重要知识点部分. 本文重点考虑移动开发,所以默认移动端的浏览 ...

  3. wex5 教程 之 图文讲解 考题模块框架设计

    前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下. 一 效果演示: 1 登陆后台 题库管理 试卷管理 考生管理 科目管理 2 考生注 ...

  4. JAVA TcpServer端使用Scanner读取不到数据的解决办法

    在使用JAVA进行Socket通信时,在Server端使用Scanner的nextLine()方法读取数据时,一直读取不到数据是因为Scanner是一个扫描器,它扫描数据都是去内存中一块缓冲区中进行扫 ...

  5. android手电筒(摇一摇也可开启手电筒)

    package com.firefly.myflashlight; import android.app.Activity; import android.hardware.Camera; impor ...

  6. ssh 免密码登录

    1.在本机下生成公钥/私钥对. ssh-keygen -t rsa -P '' -P表示密码,-P '' 就表示空密码,也可以不用-P参数,这样就要三车回车,用-P就一次回车.它在/home/yaoy ...

  7. 四大开源协议比较:BSD、Apache、GPL、LGPL (转)

    转自:http://www.lupaworld.com/portal.php?mod=view&aid=205552&page=all 本文参考文献:http://www.fsf.or ...

  8. Javascript 学习

    title: Javascript tags: javascript,学习 grammar_cjkRuby: true --- 定义变量 三种形式 var name; var name = " ...

  9. 特征创建:Reference Characteristic、Template

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. odoo定时任务

    python代码 # -*- encoding: utf-8 -*- from openerp.osv import fields, osv, orm import logging _logger = ...