« 你问我答(34)——破解缝隙之谜 | 昨天网站暂停半天及相关事宜 »

你问我答(35)——破解缝隙之谜(续)

今天上午回答了一位读者的问题，有几位朋友在留言中给出了一些评论，其中 蓝月 网友给出了一个解决方法，使我想到了以前遇到的另一个问题，因此这里再补充，并更深入地扩展说明一下。

如果没有看过上一篇文章的读者，可以先看一下：你问我答(34)——破解缝隙之谜

蓝月指出，如果在div标记和img标记的尖括号都连起来写，不加空格，就不会出现这个缝隙了。例如这样写（请注意img标记的尖括号的位置）：

1
2
3

        <div style="border:1px solid #FF0000;">
              <img src="pic.jpg" 
         ></div>

这里比较一下上面的写法和下面的写法有什么区别呢？

1
2
3

       <div style="border:1px solid #FF0000;＂>
             <img src="images/logo1.jpg">
       </div>

上面两种写法，再Firefox和IE 8中，是完全一样的，而在IE6和IE7种，却有所不同。

浏览器在解析HTML的时候，除了标记节点之外，还会根据需要生成文本节点。例如昨天的文章中，在图像的后面加了几个字母以后，就产生了一个文本节点，在没有字母的时候，本来是不应该产生文本节点的，但是IE在解析上面一种写法的代码时，会把标记之间的空格解释为文本节点，从而根据默认的规则，图像的底边和就会和文本的基线对齐，而产生了这样一条缝隙。

而当本来完全一样的代码，写成上面的第一种写法时，由于标记之间（尖括号之间）不加空格，因此IE6、IE7也不会解析出文本节点，从而也就不会产生这个缝隙了。这就解释了蓝月的方法为什么可以解决这个问题。

由此我又想到了另一个多次遇到过的针对IE6的问题，本质和这个问题是完全一样的，因此这里也介绍给大家。如下图所示的是一个很常用的效果，CSS的目的是将列表项目中的a元素改为块级元素，从而使得响应鼠标的范围扩展到li的矩形范围，而不仅仅是链接文字。

ie-li-preview.png

代码很简单，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style>
    li a {
        display:block;
        background:#CCC;
        border-bottom:1px #000 solid;
        text-decoration:none;
    }
    li a:hover {
        background:#BBB;
    }
</style>
 
<body>
    <ul>
         <li><a href="#">First Item</a></li>
         <li><a href="#">Second Item</a></li>
         <li><a href="#">Third One!</a></li>
    </ul>
</body>

事实上，以上代码在IE7、IE8、Firefox这些浏览器中都没有问题，但是在IE6中，效果将如下图所示：

ff-li-preview.png

在各个li之间为什么会产生这个缝隙呢？其实原理和上面谈到的原意是一样的，IE 6 在某些时候，会把标记尖括号之间的空格解释位文本节点，因此，解决方法就是把HTML代码的换一种写法：

1
2
3
4
5

    <ul>
         <li><a href="#">First Item</a></li
         ><li><a href="#">Second Item</a></li
         ><li><a href="#">Third One!</a></li>
    </ul>

可以看到，我们仅仅把

分在两行里写，以保证消除标记之间的空格，在IE 6中效果就立即正常了，如下图所示。

fixed-li-preview.png

需要说明的是，通过这种HTML格式的方式解决这个问题，未必是看起来最舒服的一种，当然通过CSS来解决也是可以的。不过这种方式的最大优点就是快捷和直接，立竿见影，哪里多出了文本节点，就直接在HTML中消灭掉他。如果用CSS来解决则需要具体问题具体分析，会稍微麻烦一些，当然也是完全可行的。

5,012

这篇文章发表于 2009年03月27日 星期五 8:18 pm，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。



欢迎您发表留言

(须填写)
(须填写,不公开)
请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

30条留言