display:inline-block

IE6/7不支持display:inline-block属性,只是可以让标签有类似于inline-block的属性,起初我也是接受这种说法的,不过后来又表示了怀疑,最近使用text-align:justify;做测试的时候的一些样式表现证实了:确实IE6/7是不支持display:inline-block属性,只是让其表现的跟inline-block一样,尤其对于inline水平的元素,其表现度可以用perfect一词来形容了。

对于IE8+以及现代浏览器,直接使用:

{display:inline-block;}

就可以了,支持任意水平的元素。

对于不支持的IE6/7浏览器该怎么办呢?如果是inline水平的元素(如a标签,span标签之类)跟上面一样,直接:

{display:inline-block;}

就可以了,对于这两个浏览器,其功效与*zoom:1;是一样的。

如果是block水平的元素,例如li标签。则需要多点代码,目前我知道的方法有两个,如下所示:

li {display:inline-block;...}
li {display:inline;}

或者是:

li{display:inline; zoom:1;...}

display:inline-block

时间: 2024-09-30 15:04:21

display:inline-block的相关文章

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

display:inline 跟 display:block 跟 display:inline-block区别

我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a> <a

display:inline、block、inline-block的区别 摘】

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片

display:inline、block、inline-block的区别

block元素的特点是: 元素另起一行: 行宽高边距可控制: <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. <span>, <a>, <label>, <input>, <img>, <strong&

display:inline、block、inline-block

display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和

【转】display:inline、block、inline-block的区别

转自:http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就

[CSS3] CSS Display Property: Block, Inline-Block, and Inline

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg

2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向上margin:auto;无效.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子DIV-margin</tit

display:block display:inline display:inline-block

默认情况下label.span 设置width 是无效的, 只有当display:block时,我们所设置的width才有效果,但这样会换行 不换行可以使用display:inline-block; (另外label设置 position:absolute时,width也是有效果的) 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立