一淘九宫格面试题,bug疑问求解?

Gino
  • 251
<!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布局等方案就不用说了。

回复
阅读 4.2k
2 个回答

注意到,把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,完全不懂,坐等高人解答

你知道吗?

宣传栏