IE下块元素如何实现display:inline-block

延伸一个问题:ie下块元素如何实现display:inline-block的效果?

  有两种方法:

  1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个css教程声明中才有效果,这是ie的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。

  代码如下(…为省略的其他属性内容,火狐不好用):
div{display:inline-block;...}
div{display:inline;}

  2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等,火狐不好用)。

  代码如下:
div{display:inline;zoom:1;...}

时间: 2024-10-08 10:43:36

IE下块元素如何实现display:inline-block的相关文章

block(块元素)、inline(内联元素)的差别是什么?

我们首先要了解,所有的html元素,都要么是block(块元素).要么是inline(内联元素).下面了解一下block.inline各自的特点: block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度. inline元素的特点: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. 我们来详细了解它们的情况. 块元素(block element)一般是其他元素的容器元素,块元素一

css display:inline 防止html元素变成块元素

 css中,display:none; 的作用是让html元素隐藏,反之让其显示,通常使用 display:block;.但 display:block; 的另一个作用是,让当前html元素变成块元素.  像 <select>/<input>/<span> 等元素都属于占位元素,也就是说,这几个元素写在一起,但只占一行.而 <div>/<h1>/<h2>/ 等,都会独自占用一行.  现在有这么一个需求:在使用 display:none

内联元素(inline element)和块元素(block element)

文章简介:CSS里有哪些常见的块级元素和行内元素?  根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素. div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高

【原】如何实现IE6下块级元素的内容自动收缩

近期在做提示层组件的开发,遇到了一个IE6常见的bug....想出了几个解决的办法,挺有意思的,这里分享给大家. 由于IE6浏览器中,display:inline-block只能触发IE的haslayout属性使得元素具有布局属性,当对div元素使用display:inline-block,div元素仍然为块状布局而占据一行. 那么如何在IE6下使得块级元素的内容自动收缩呢?开发圆角小提示层模块,让它来解答这个问题. 结构和样式: /** * @name : prompt * @explain

块元素block element和内联元素inline element_CSS/HTML

内联级元素(inline-level element)中试图插入块级(block-level element)元素.这样做是不允许的.唯一的能在内联元素中插入块级元素的例外是object标签.那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢?. 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"."form"这个

详解CSS布局设计块元素和内联元素

css|设计|详解 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout

display:inline与float:left的正确解释

    首先我们要明确,display:inline;与float:left;正确含义.display:inline;(内联)<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是"行布局"形式,这里的"行布局"的意思就是说其表现形式始终以行进行显示.比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线.如果是块级元素那么所显示的的黑线只

对display:inline;与float:left;的认识

这样的题目显得有点可笑,但是鉴于很多网友在标准学习的过程中常被这样的问题所困扰(例一.例二),所以特此专文澄清两者之间的区别与特性. 首先我们要明确,display:inline;与float:left;正确含义.display:inline;(内联)<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是"行布局"形式,这里的"行布局"的意思就是说其表现形式始终以行进行显示.比如,我们设定一个内联元素border-botto

澄清display:inline;与float:left;的用途

这样的题目显得有点可笑,但是鉴于很多网友在标准学习的过程中常被这样的问题所困扰(例一.例二),所以特此专文澄清两者之间的区别与特性. 首先我们要明确,display:inline;与float:left;正确含义.display:inline;(内联)<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是"行布局"形式,这里的"行布局"的意思就是说其表现形式始终以行进行显示.比如,我们设定一个内联元素border-botto