今天使用百分比写一个导航的demo，在IE7中检测时候最后一个导航掉下来，跟前边的不在一行，而在别的浏览器中都显示正常，包括非IE7的其它IE更高或者更低的版本。还以为是IE7的百分比解释有什么bug呢，但是在“查看元素”中调试的时候，无意发现，有时候不会掉下来，而有时候又掉下来，就这样在宽度的加加减减的时候，对齐不对齐现象也是时有时无的发生。
#nav{width:80%;height:60px;margin:60px auto;color:#fff;}
#nav li{list-style-type:none;float:left;width:10%;height:60px;background:#000;text-align:center;font:bold 1.6em/60px "微软雅黑";cursor:pointer;}
在老师的帮助下，先将父元素的width:80%;更改为一个固定值800px;然后增加或者减少#nav的width的大小，下表示width的不同取值，各个导航元素（li）在各个浏览器中宽度和显示的变化：
| width | chrome下li宽度 | 是否对齐 | firefox或者非IE7的IE浏览器 | 是否对齐 | IE7下li的宽度 | 是否对齐 |
| 801px | 80; 80; 80; 80; 80; 81; 80; 80; 80; 80; | 是 | 80; 80; 80; 80; 80; 80; 80; 80; 80; 80; | 是 |
80; 80; 80; 80; 80; 80; 80; 80; 80; 80; |
是 |
| 802px | 80; 80; 81; 80; 80; 80; 80; 81; 80; 80; | 是 | 同上 | 是 | 同上 | 是 |
| 803px | 80; 81; 80; 80; 80; 81; 80; 80; 81; 80; | 是 | 同上 | 是 | 同上 | 是 |
| 804px | 80; 81; 80; 81; 80; 80; 81; 80; 81; 80; | 是 | 同上 | 是 | 同上 | 是 |
| 805px | 81; 80; 81; 80; 81; 80; 81; 80; 81; 80; | 是 |
81; 81; 81; 81; 81; 81; 81; 81; 81; 81; |
是 |
81; 81; 81; 81; 81; 81; 81; 81; 81; 81; |
否 |
| 806px | 81; 80; 81; 80; 81; 81; 80; 81; 80; 81; | 是 | 同上 | 是 | 同上 | 否 |
| 807px | 81; 80; 81; 81; 80; 81; 81; 81; 80; 81; | 是 | 同上 | 是 | 同上 | 否 |
| 808px | 81; 81; 80; 81; 81; 81; 81; 80; 81; 81; | 是 | 同上 | 是 | 同上 | 否 |
| 809px | 81; 81; 81; 81; 80; 81; 81; 81; 81; 81; | 是 | 同上 | 是 | 同上 | 否 |
| 810px | 81; 81; 81; 81; 81; 81; 81; 81; 81; 81; | 是 | 同上 | 是 | 同上 | 否 |
当继续增加的时候就是81跟82之间的变换了。从上边的数据变化中我们可以看到chrome（最新版本版本 37.0.2062.120）是将多出来的分摊到部分元素上显示，但是其他的浏览器都是四舍五入，看到这里，你会迷惑，按理说chrome以外的浏览器在805px（含）以后都应该掉下来才对，但是只有IE7是按照我们的逻辑显示的。是的，这里边的确有猫腻。这是因为"firefox或者非IE7的IE浏览器"在显示的时候都有“妥协”，所以实际显示跟chrome一样，但是具体的导航元素（li）的宽度确实四舍五入后的结果。
原因找到了，但是还要解决IE7的bug，我使用的方法是：对最后一个元素添加一个class=“IE7”然后在样式中写入：.IE7{+width:9.71%;}这个宽度结果是在IE7的“查看元素”中调试出来的结果，具体应用还要看具体情境。
如果大家有更好的方法，还望大家赐教……