ie6 bug之设置text-indent后看不到背景图
来源:互联网 发布:网络侦探dlc下载 编辑:程序博客网 时间:2024/05/16 11:31
今天遇到的一个 Bug,主要表现为:当容器的第一个子元素为 inline 属性,并且为该子元素定义了 text-indent 的话,IE 渲染出错。
例子 1:
<div style="margin: 10pxauto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<spanstyle="background: #FF0; color: red; text-indent:50px;">Indent</span>
正文
</div>
在Firefox 中,渲染正常:
在IE6 中,错误:
错在 text-indent 只在 block 级别的元素中体现,在本例中的 span 元素中,应予忽略。
例子 2:
给span 加个浮动,让它自动成为 block 元素看看。
<div style="margin: 10pxauto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<spanstyle="float: left; background: #FF0; color: red; text-indent:50px;">Indent</span>
正文
</div>
在Firefox 中,渲染正常:
在IE6 中,错误:
错在 span 将自身的 text-indent 属性传递给了它的父元素 div。
例子 3:
负值的 text-indent 会是怎样呢?
<div style="margin: 10pxauto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<spanstyle="background: #FF0; color: red; text-indent:-9999px;">Indent</span>
正文
</div>
在Firefox 中,渲染正常:
在IE6 中,错误,我们什么也看不到了:
错在 span 不但将自身的 text-indent 属性传递给了它的父元素 div,而且还将超出的内容隐藏了,在没有定义 overflow 属性时,元素的默认 overflow 属性应该是 visible。
例子 4:
既浮动,又负值的 text-indent 呢?(事实上我正是在这种情况下遭遇了这个 Bug):
<div style="margin: 10pxauto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<spanstyle="float: right; margin-left: 5px; width: 40px; background: #FF0;color: red; text-indent: -9999px;">Indent</span>
正文
</div>
在Firefox 中,渲染正常:
在IE6 中,仍然是错误:
依然是 span 将自身的 text-indent 属性传递给了它的父元素,并将超出的内容隐藏了。
以上的 Bug 在 IE8 的“IE7mode”中得到了部分修正,当 span 为浮动时基本是正常的,但默认情况下仍然错误。其他版本未测试。
- ie6 bug之设置text-indent后看不到背景图
- ie6下text-indent带来的一个bug
- IE6 BUG诡异的行内替换元素设置浮动并设置text-indent:xx px 影响相邻元素布局
- IE 的 text-indent Bug
- IE6,IE7下text-indent消失问题
- IE6/IE7中text-indent对input背景的影响
- 当inline-block和text-indent遇到IE6,IE7
- text-indent在ie6下input发生位移
- text-indent
- text-indent
- text-indent
- 一起来学css之text-indent用法
- 【CSS】修复IE6下不缓存背景图的BUG
- 设置text-indent:-9999px;为何没有效果?
- indent设置
- IE6,IE7下text-indent为负值的时候 line-block不起作用。
- 在ie6下面,overflow与text-indent:-9999px 字体隐藏
- CSS3属性之text-indent文本缩进使用详解
- 键盘上每个键的作用
- Ubuntu GCC常用编译命令选项
- PDF模板报表导出(Java+Acrobat+itext)
- 【android乱七八糟】关于OnClickListener事件中加switch语句讨论
- 送给“苦逼”的IT人系列1:IT人的“钱”景以及收入的两道坎 .
- ie6 bug之设置text-indent后看不到背景图
- g711
- windows phone 使用相机并获取图片(3)
- 在Powe Point 2007 里输入汉字 、字符、数字等,非常慢的解决方法
- 程序员们谎称读过的计算机书籍
- php调用其他系统的接口整理
- 类的静态成员与静态成员函数
- Vim、source insight的Right margin
- apache本机虚拟主机配置