关于ie6块元素行内元素转换

1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;
2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;

IE6下块元素如何实现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 或float 属性等)。
代码如下:
div { display:inline-block; _zoom:1;_display:inline;}
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

原文地址:https://www.cnblogs.com/xguoz/p/9962619.html

时间: 2024-08-30 03:44:27

关于ie6块元素行内元素转换的相关文章

HTML 块级元素行内元素的区别

HTML标签 一.块级元素和行内元素是布局中常见的两种基本元素 常见块级元素:div  p  form ul ol li 常见的行内元素:span stronh em; 二.块级元素特性 1.默认独占一行 2.没有宽高时默认撑开一排 3.支持所有css属性 三.内联元素的特性 1.同排可以继续跟同类的标签 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margin和padding 5.代码换行被解析 四.块级元素内联元素相互转换 css        display:block;  块级元素

2015-09-22 第四节课 CSS块级元素 行内元素 浮动 盒子模型 绝对定位、相当定位和固定定位

常见的块级元素和行内元素 一.块级元素 1.块级元素的特点: (1).默认显示在父标签的左上角. (2).块级元素默认占满一行(沾满整个文档流). 2.常见的块级元素: <p>.<h1-h6>.<ulli>.<olli>.<div>.<tabl>.<hr> 二.行内元素(内联元素) 1.行内元素的特点: (1).大小受到文字区域的影响,不受到width和height的影响. (2).行内元素不会单独占满一行. 2.常见的行

css总结17:HTML块级元素&amp;行内元素之分: &lt;div&gt; 和&lt;span&gt;

1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, <table> 块级元素的特点: 独占一行,可设置宽高 1.2 行级元素实例 :<span> <a> 行级元素特点:一行可排布多个,不可设置宽高. 1.3 行内块元素:使用的最多:<input> <img> 行级元素特点:一行可排布多个,也可设置宽高.

块元素 行内元素 行内块元素

1.块元素典型代表:div,h1~h6, p,ul,li(ul li列表元素)特点:独占一行,可以设置宽高,嵌套或者包含下,子块元素宽度没有定义时,和父元素宽度默认一致,2.行内元素典型代表:span,a,strong,em,del,ins特点:在一行上显示,不能直接定义宽高3.行内块元素(内联元素)典型代表:input,img特点:在一行显示,可以设置宽高 原文地址:https://www.cnblogs.com/twinkle-/p/9074817.html

块元素 行内元素 行内快

块元素: h1-h6,ul,ol,li,dl,dt,dd 默认宽度占满父元素的整个width,会换行,能设置width height,上下左右margin padding都有效. 行内元素: span a b img(img特性比较特殊) 默认宽度自适应,不能设置width height,上下margin无效,左右margin有效,上下左右padding都有效,但上下padding会和上下的元素重合 行内快: input select 宽度自适应 ,可以一行显示,可以和行内元素一行显示,其他特性

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的display属性(行内元素和块级元素) 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 我们最关心的还是display:inl

html中块级元素和行内元素

块级元素和行内元素的三个区别 1.行内元素与块级元素直观上的区别: 行内元素会在一条直线上排列,都是同一行,水平方向排列 块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行 2.块级元素可以包含行内元素和块级元素, 行内元素不能包含块级元素 3.行内元素和块级元素属性的不同,主要是盒模型属性上 行内元素设置width无效,height无效(可以设置line-height), 行内元素margin上下无效,padding上下无效 行内元素转换块级元素,用css实现 display:

详解css中的display属性(行内元素和块级元素)

display属性 首先,所有主流浏览器都支持 display 属性.其次,我们都知道display 属性规定元素应该生成的框的类型.默认值:inline 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 那么,display:inline.display:block和display:inline-block有什么区别呢? <s