ie6 折腾计

IE6/IE7下:inline-block解决方案

IE6/IE7下对display:inline-block的支持性不好。

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

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

对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性)

IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

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*/

时间: 2024-10-17 06:05:20

ie6 折腾计的相关文章

Kindle dxi折腾小计

缘由 大部分相关帖子已不靠谱,链接几乎全部失效. 起点 到手装好多看(0.5.13.8942 Beta0520),查看系统配置为Kindle 2.3.3 + UFH 0.3 升级固件 这没什么好说的,直接下载官方的2.5.8固件(Update_kindle_2.5.8_B005.bin)即可. 值得注意的是UFH(Unicode Fonts Hack)会导致系统固件安装失败,需要提前卸载掉.还有百度云下载下来的文件和官方的散列值不同,建议直接去官网下载. 接着下载Kindle服务更新更新包(up

计蒜客 无脑博士和他的试管们

无脑博士有三个容量分别是A,B,C升的试管,A,B,C分别是三个从1到20的整数,最初,A和B试管都是空的,而C试管是装满硫酸铜溶液的.有时,无脑博士把硫酸铜溶液从一个试管倒到另一个试管中,直到被灌试管装满或原试管空了.当然每一次灌注都是完全的.由于无脑博士天天这么折腾,早已熟练,溶液在倒的过程中不会有丢失. 写一个程序去帮助无脑博士找出当A是个是空的时候,C试管中硫酸铜溶液所剩量的所有可能性. 输入包括一行,为空格分隔开的三个数,分别为整数A,B和C. 输出包括一行,升序地列出当A试管是空的时

【转载】IE6 PNG透明终极解决方案(打造W3Cfuns-IE6PNG最强帖)

原文地址:http://www.w3cfuns.com/thread-297-1-1.html 本文版权归W3Cfuns.com所有,转载需在文章页面明显位置以链接的方式给出原文链接,否则W3Cfuns.com将根据<中华人民共和国著作权法>向北京市人民法院提交相关材料,追究侵权责任. “珍惜生命,远离IE6”,IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果,为了让大家

安卓版微信自带浏览器和IE6浏览器ajax请求abort错误处理

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46419567 给页面元素绑定了一个click事件用来触发ajax请求,在安卓微信自带浏览器中和IE6下,请求时常会被中断,返回错误类型"abort",在其他浏览器中都一切正常. 在IE6中使用Fiddler2和httpWatch监视请求,经常会出现"aborted",折腾特么一个周末,..... 不说废话了.... 解决办法:在标签上加上onclic

ie6解决png图片透明问题

看了网上各种方法,选了个比较好的, 说明:网上说可以解决hover问题,但是我试过不知道为什么不行,(可以看之前的ie6解决hover的文章)但是用来解决网页直接引用的各个小图标还是很棒的,毕竟你用gif的小图标的话,锯齿很严重,png的要好太多. 方法如下: 1.下载DD_belatedPNG.js,代码如下: PS:此代码已经在最后加入,整理好放入相应文件夹,不用多说 DD_belatedPNG.fix(".pngFix,.pngFix:hover"); 1 var DD_bela

js动态改变图片src在ie6下的兼容问题

场景:验证码图片在ie6下出不来 这个BUG折腾了我近半个小时,最后GOOGLE成功,原因是IE6的底层BUG,我们使用<a>的href属性改变的时候会中断加载,导致我们看不到图片,这经常在验证码或动态改变图片的时候遇到. 所以我们在使用a 链接时通常href和onclick都会同时用到,链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,o

IE6下面 position:absolute 失效导致绝对定位层不显示的原因

在网上看到的,最近遇到好几次,总结就是 当你发现某元素在IE6,7下面无法显示的时候,且这个元素是经过position absolute的,加之前后之类的有浮动,你就要考虑一下兄弟元素,有时候是前面,有时候是后面,加一个<div class="clearboth"></div> 今天早上重构一个机票订购页面的时候,为了配合JS特效所以需要写一个绝对定位浮动层,写完在测试的时候发现,在FF.ie8.ie7.op下都可以正常显示,可是到了IE6的时候,这个绝对定位浮

IE6 PNG透明终极解决方案

方案1 - 滤镜解决方案: 介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片.注意:此方法在部分版本的IETest中无效,建议使用标准的IE6来进行测试! 目录说明: 思路:         1.书写正常的CSS代码,通过background导入图片,这样所有的浏览器均使用了此PNG图片:                background:url( ../images/W3CfunsLogo.pn

小折腾:JavaScript与元素间的抛物线轨迹运动

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3855 一.一剂预防针 好的体验应该是在用户试用之前就告知产品的一些特点.局限性等.类似裤子都脱了,才来一句:“我今天大姨妈巅峰期”的场景显然是会让兴致勃勃的用户受挫的. SO, 有必要在这里打个预防针,本文实际上没什么技术养料,就是昨晚因实际工作需要折腾的个东西,抛物线轨迹动画.如果你急着跟女神搞昧,下面的可以直接p