一淘九宫格面试题，bug疑问求解？

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
  *{margin:0;padding:0;}
    #container{width:135px;border-top:5px solid #00f;border-left:5px solid #00f;}
    a{float:left;width:40px;height:40px;border: 5px solid #00f;margin-left:-5px;margin-top:-5px;}
    a:hover{border-color:#f00;position:relative;}
  </style>
</head>
<body>
  <div id="container">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    </div>


</body>
</html>

在线测试：http://jsbin.com/otuqag/1/ 此代码在ie6中意外折行，已经测试过以下方案：

1可行方案：在#container 与 a 之间嵌套个inline元素，如span。

2可行方案：把代码之间的换行符删除掉。

3不可行方案：设置#container{font-size:0;letter-spacing:-1px}。

从解决方案上看，似乎是whitespace的问题(2解决了bug)，但又不是（3没解决）；当我在a的后面又加了三个a，然后问题突然又很像ie6的幽灵文本bug了！请教了。

ps：请把问题关注点放在：ie6的这个bug的触发条件是什么?产生此bug的原因什么？至于其他的方案，例如你的代码不够语义化，应该在a外面嵌套个li、改用inline-block布局、改用table布局等方案就不用说了。

注意到，把container部分的代码变成

<div id="container"><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a></div>

就不会触发换行bug

更进一步发现，如果删除一部分空格，删除空格的数量和折行的位置是有关系的

可见问题的来源是代码中的空格和换行符被IE6当作了要显示出来的whitespace

至于为什么加<span>能够fix，完全不懂，坐等高人解答

在a的外层添加#nobr#...#/nobr#便签，强制内容不换行。具体查看html nobr标签由于我不熟悉怎么插入代码。请把#换成<>对应标签具体查看属性：http://www.monmonkey.com/rumenpian/html/nobr.html

【热门文章】