IE6、7下块级元素设置display:inline-block不换行的解决办法
使用背景
在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6、7下,当把block元素设置成inline-block之后,还是在分别的两行,下面我们看一下现象。
代码以及IE6、7下的表现
CSS:
body {
padding: 10px;
} .block_to_inlineblock,
.inline_to_inlineblock {
padding: 10px;
margin: 10px;
float: left;
} .block_to_inlineblock div {
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 12px;
}
HTML:
<div class="block_to_inlineblock bdr_blu">
<h3>block元素设置成inline-block</h3>
<br/>
<div class="bdr_red">
DIV:inline-block
</div>
<div class="bdr_blu">
DIV:inline-block
</div>
</div>
现代浏览器chrome下的表现
IE6下的表现
IE7下的表现
IE8+下的表现形式
可见,chrome以及IE8+下display:inline-block按正常显示,而IE6、7下显示是不正确的,那么解决办法是先把block元素排成一行,然后再触发hasLayout,这样就能很好的解决这个问题了。
解决方案
.block_to_inlineblock div {
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 12px;
*display: inline;
*zoom:;
}
增加:*display: inline;是为了让块元素排成一行,*zoom:1的作用是触发hasLayout,能够支持设置宽、高、line-height等一系列属性。然后看下效果:
IE6下的表现:
IE7下的表现
IE6、7下块级元素设置display:inline-block不换行的解决办法的更多相关文章
- CSS 中的内联元素、块级元素以及display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- CSS 中的内联元素、块级元素、display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- 浅谈HTML中的块级元素和内联元素
一.基本概念 1.块级元素(block element):一般都从新行开始占据一定的矩形空间,可以设置其宽.高属性来改变矩形的大小.一般情况下块级元素可以包含内联元素和其它块级元素,但也有特殊如for ...
- 块级元素display:inline-block 在IE6 IE7无效
ie6,ie7中,对块级元素设置display:inline-block,无效. 所以要先设置为inline,再触发haslayout .div1{ /*重点代码开始*/ display: inlin ...
- HTML 行内元素和块级元素的理解及其相互转换
块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...
随机推荐
- css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- Swift3.0 基础学习梳理笔记(一)
本篇是我在学完一遍基础语法知识的时候,第一遍复习,我一遍梳理一遍记录的笔记.同时分享给像我一样在学习swift 的猿友们. 本篇可能过于冗长.所以所有的参考资料都分模块的写在palyground 里, ...
- RN控件之ProgressBarAndroid进度条
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- 红米用adb连接显示unauthorized的解决办法
网上能搜到的各种办法都试过了, 没一个可行: 1.大部份是用来解决usb不识别的,也就是adb devices不显示.但现在是有显示,只是unauthorized 2.我习惯用tcp连接,少根线,多台 ...
- hdu1052
#include <iostream>#include<algorithm>#include<queue>#include<stack>#include ...
- uWSGI + Nginx + Django 部署
1. uWSGI 服务器 Django 默认使用 WSGI(Python Web Server Gateway ) 作为 Web 服务器,一般仅用来作为测试使用,实际生产环境而是使用 uWSGI 和 ...
- 更改数据,ExecuteNonQuery()
using (mycon) { mycon.Open(); string MyTime; DateTime dtDate; MyTime = textBox1.Text.ToString(); str ...
- 51nod1419 【数学】
思路: n<=3,就是n. 考虑n>3: 我们可以轻松证明n,n-1这两个数互质: 设gcd(n,n-1)=g,n=g*k1,n-1=g*k2; n-(n-1)=g(k1-k2)=1; 所 ...
- nginx 服务器并发优化
apache 提供的 ab 可以对服务器进行压力测试, 安装 ab: apt-get install apache2-utils 安装完后,ab 在目录 /usr/bin/ 下的. 执行: ab ...
- 浅谈UML——九种图(一)
前言 学UML将近两个星期了,对UML有了一定的了解,学过的没学过的都知道UML中最最最核心的部分要数那九个图了.浅谈UML九种图. 实例 1.用例图: 什么是用例?描绘一个系统外在可见的需求情况,是 ...