置换元素在IE浏览器中的疑难杂症

nunumick — Sat, 30 Jan 2010 04:01:42 +0000

置换元素在 IE 浏览器中有不少问题，比方说置换元素的行高就是其中难题之一，当然还有 form 元素 textarea 的边距继承 bug，OK，今天再介绍几个，凑满一箩筐。

置换元素与A标签

场景：
IE6，A标签内的图片（置换元素），默认隐藏，hover显示

html：

css:

   a img{display:none}/*使用visibility也行*/
   a:hover img{display:block;}

现象：
ie6,hover后无法正常显示 a 标签内的图片

解决方法：

hover 时触发 a 标签的 hasLayout
```
   a:hover{
      _zoom:1;
   }
```
使用 JS 脚本添加 class

Demo：demo1

置换元素与position

在前面的基础上给 img 加上容器，设置position，默认隐藏，hover 显示

html:

css:

   a{position:relative}
   a span{position:absolute;display:none;}
   a:hover span{display:block;}

现象：
ie6,hover后无法正常显示 a 标签内的图片，触发其 hasLayout 可以显示，但无法再次隐藏

Demo：demo2

解决方法：

使用visibility代替display
清除span元素的position
使用脚本

一个更极端的例子：The IE ‘non-disappearing content’ bug

图片与hasLayout

同样的例子，如果 img 的容器 span 元素被触发 hasLayout 则会导致 a 链接在 IE6/7 浏览器下失效（图片区域）

html:

css:

   a span{display:inline-block}/*float,absolute,zoom都行*/

现象:
图片区域链接无效

Demo：demo3

解决方法：

还原span容器的hasLayout
尽量不要采用此类布局

Comments

2010年01月31日, rainoxu writes: 这个之前我也遇到过，减少嵌套，合理嵌套是更好的解决方式。 p.s:要是能附上上面这些问题出现的原因，那就更好了：）

也说置换元素引起的行高BUG

nunumick — Fri, 06 Jun 2008 01:27:49 +0000

首先说明此BUG在IE7已经被修复，不过鉴于目前IE6浏览器使用占有率还是非常之高，还是很有必要了解下这个“臭虫”！而且我写这篇文章的主要目的是为了阐述另一个结论，请看。

BUG的起因： 只要行内有置换元素，就会引起这个BUG。这里我们首先要知道的是什么是置换元素，在我前面转贴的文章中已经给出了W3C官方对于置换元素的解释： 置换元素（replaced element）主要是指img，input，textarea，select，object等这类默认就有CSS格式化外表范围的元素。

我们再来看看这个BUG在万恶的IE6中的表现：
拿最普遍的表单输入做一个例子





    


    
    
        这是一个多行的例子，行高50px，在IE7，FF,OPERA下面显示的是正常
        

        请注意看IE6以下浏览器的表现
        

        姓名:这里我们放入的是input这个置换元素
        

        提示1：请输入真实姓名
        

        城市:
        

        提示2：请如实选择你的所在城市

FF,IE7截图<图1>

IE6截图<图2>

对比下就知道，在IE6下，置换元素会引起行距错乱。下面一张是IE6中接连两行都有置换元素时的截图
<图3>

可以看到这两行已经没有上下间距了。
这里打住，首先让我们提两个概念：line-height和font-size，行高和字体大小。line-height减去font-size称之为“间距（leading）”。间距的一半，称之为“半间距”。而这个“半间距”会被加在每行文字的上面和下面，于是行与行之间的空隙（有上一段下面的半间距和下一段上面的半间距相加而成）就出来了。在本例中，行高是50PX，字体大小是16PX，那行间距应该是50-12＝38PX；半间距就是19PX;

看了上面的解释，相信大家对行高和间距的定义都有了正确的理解，那么我们来看看是什么原因导致万恶的IE6出现了如此奇怪的BUG，其实到目前为止都没有一个官方的解释，网上的解释都是我们自己瞎猜的，有的说置换元素使上下相邻行间距减半，有的说带有置换元素的那行文字的上下半间距，和相邻的上下两行的下上半间距合并到了一起，使间距减半。但是我认为真正的原因并不是减半这么简单，综合<图2>和<图3>，可以很明显的看出置换元素并没有受到line-height的影响，就是说置换元素和其他行的间距应该为0，其实是没有间距的，而不是象网上所说的间距减半（如果间距减半那就说明自己还有间距）那样有自己的间距。请再仔细分析这2张截图，应该不难得出和我一样的结论。

BUG修复的方法：我决定自从我知道了真正的BUG原因之后，抛开什么减半和合并或者重叠的说法，我对如何去修复也终于是理解的更透彻了，既然置换元素img,input,select等对line-height不感冒，那我们计算出他们的行半间距，以”margin:半间矩PX 0；“的方式为这些固执的置换元素加上就好了，不过要搞清楚的是不能以“(行高-字体大小)/2”来计算半间矩，应该以”(行高-置换元素高度)/2“来计算。据说现在也只有这么一个不是办法的办法=.=!

我的结论： IE6下，line-height对带有置换元素的整行文字不起作用，应该是撤撤底底的无效，换句话说置换元素是没有行间距的。这就是我今天要阐述的结论。因此在进行前端设计的时候要考虑到这一点，非要用line-height来设置行高的话，需要为ie6进行HACK，HACK的方法是：

*html input,img,select{margin:计算得到的半间距px 0;vertical-align:middle;}

vertical-align是为了让垂直位置更准确居中，象input,img,select这些都是置换内联元素，受到vertical-align的影响。

Comments

2009年08月18日, ade writes: 解释的真清楚,终于弄明白了,谢谢分享
2010年01月30日, Silentash-默尘 » 置换元素在IE浏览器中的疑难杂症 writes: [...] IE 浏览器中有不少问题，比方说置换元素的行高就是其中难题之一，当然还有 form 元素 textarea 的边距继承 [...]

Silentash-默尘 » 置换元素

置换元素在IE浏览器中的疑难杂症

置换元素与A标签

置换元素与position

图片与hasLayout

Comments

也说置换元素引起的行高BUG

Comments