首页 > 代码库 > IE7百分比计算bug

IE7百分比计算bug

2024-07-26 03:17:13   226人阅读

今天使用百分比写一个导航的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）在各个浏览器中宽度和显示的变化：

　　

widthchrome下li宽度是否对齐firefox或者非IE7的IE浏览器是否对齐IE7下li的宽度是否对齐
801px80; 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; 
是
802px80; 80; 81; 80; 80; 80; 80; 81; 80; 80;是同上是同上是
803px80; 81; 80; 80; 80; 81; 80; 80; 81; 80;是同上是同上是
804px80; 81; 80; 81; 80; 80; 81; 80; 81; 80;是同上是　　同上是
805px81; 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; 
否
806px81; 80; 81; 80; 81; 81; 80; 81; 80; 81;是同上是同上否
807px81; 80; 81; 81; 80; 81; 81; 81; 80; 81;是同上是同上否
808px81; 81; 80; 81; 81; 81; 81; 80; 81; 81;是同上是同上否
809px81; 81; 81; 81; 80; 81; 81; 81; 81; 81;是同上是同上否
810px81; 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的“查看元素”中调试出来的结果，具体应用还要看具体情境。

如果大家有更好的方法，还望大家赐教……

IE7百分比计算bug


联系
我们