然而,问题是当我们的设定#d的宽度为798px呢?——那再给倒数第二个#d li加个样式来设定宽度width:157px不就得了?那如果再重新设定#d的宽度为797px、796px……呢?(也许你设计完成一个页面后再也不会动这些宽度尺寸了)但再麻烦点的是如果#d li的节点数需要调整了——表现为我们在日常的网站开发和维护中往往会增加或减少这种导航列表栏目,是否还要重新计算和分别设定这些#d li的宽度呢?
这不算很麻烦,我的数学还不至于那么差劲——也许你会说。
但真正麻烦的是:当我们在做一个按百分比来进行页面及横向导航的设计时,这些#d li的宽度又该如何设定呢?还是实例为王,下面只是对上面的示例做个小小的改动,还好是5个#d li节点,正好每个宽度是20%:
测试好像也很不错,似乎没什么不如意的地方(可能在有些机器上会折行)。再调整一下分辨率看看 ——还是挺好的啊(可能在有些机器上会折行)!那么你在试试缩小IE窗口(不是最小化到任务栏),如果还是正常的话(相信有些朋友的导航效果已经开始出现折行了)——我会有办法让你沮丧的把你的鼠标放在缩小后的IE窗口的右边框上,横向逐渐逐渐拖动缩放IE的窗口——不用多说,很多朋友肯定早已明白这当中的原由,这里啰嗦一下主要是针对一些不太明白的新人,老人就忽略这段吧简单说一下:
上例中设定的#d的百分比宽度为80%,那么这个宽度自然会随着IE窗口大小的改变而改变,如果调整后的IE窗口为999,那么这时这个#d的实际宽度为 792,这个宽度自然不能被#d li的节点数整除,也就是20%宽度不为整数(浏览器显示的最小单位是1象素,不能再分了,可能是四舍五入),很自然就会出现#d li的宽度和大于#d的实际宽度而导致折行现象了。
天哪!差点忘了,上面#d li定义了 border为1px,则#d li的宽度总和为100%+10px了,赶紧去掉再试试——这回好像可以了,再也没有出现上面的现象,IE好像没有对#d li的实际宽度进行四舍五入算法。难道这里就不能再额外设定#d li的 border和padding了吗?
这还不算,最糟糕的是:
如果#d li的节点数为3/7/9/11……等等根本不能均分#d宽度的值,你又得分别设定每个#d li的百分比,使它们的总和等于100%了。而且依旧不能再额外设定#d li的border和padding
另外:在#d的宽度为固定尺寸下,设定的#d li为百分比时,有时也会出现一些你不想看见的问题,相信很多朋友也遇到过。不了解的可以自己试试。