vertical-align及IE7下的inline-block
在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的更多相关文章
- text-align:center;在ie7下,父级加上会让block状态的子元素居中。
text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.
- IE6/IE7下:inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- 关于ie7下display:inline-block;不支持的解决方案
关于ie7下display:inline-block:不支持的解决方案 今天码的时候遇到这个问题了. 如果本身是内联元素的,把它的display属性设置设置为inline-block时,所有浏览器都是 ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- IE6/IE7下:inline-block不兼容的问题
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素 ...
- 【css】ie6 和 ie7 下 position 与 overflow 的问题
前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...
- IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...
- IE6和IE7下绝对定位position:absolute和margin的冲突问题解决
绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...
随机推荐
- opencv的学习笔记1
想在周末去游泳,找了些游泳的注意事项什么的,想想还没干正事,就来继续看看opencv的使用吧,晚上看了opencv的一些基本入门的东西,打算下面主要总结CSDN上一个大牛的博文,链接如下:http:/ ...
- python日志模块
许多应用程序中都会有日志模块,用于记录系统在运行过程中的一些关键信息,以便于对系 统的运行状况进行跟踪.在.NET平台中,有非常著名的第三方开源日志组件log4net,c++中,有人们熟悉的log4c ...
- 50个常用的JQuery代码
1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“se ...
- Android中帧布局-FrameLayout和网格布局-GridLayout
帧布局-FrameLayout 一.概念 帧布局中,容器为每个加入其中的空间创建一个空白的区域(成为一帧).每个空间占据一帧,这些帧会按gravity属性自动对齐. 帧布局的效果是将其中的所有空间叠加 ...
- mac攻略(一) -- git使用
1.首先在官网下载 https://git-scm.com/download/mac 2.然后安装git(mac自带git) 3设置Git的user name和email: $ git c ...
- 仿souhu页面设计
仿搜狐页面设计 Html页面设计代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- Android ActionBar的基本用法
一 说明android 3.0后出现, 在3.0之前称为Title Bar 显示位置在标题栏上可以显示应用程序的图标和activity的标题创建方式的和系统菜单相似, 区别在于: android: ...
- C# Reportviewer 固定表头
RDLC报表固定每页都显示表头以XML方式打开rdlc文件查找到<TablixRowHierarchy> <TablixMembers> <TablixMember> ...
- 【leetcode❤python】 1. Two Sum
#-*- coding: UTF-8 -*- #AC源码[意外惊喜,还以为会超时]class Solution(object): def twoSum(self, nums, target): ...
- jquery总结01-基本概念和选择器
dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom var div = doc ...