2009年4月25日星期六

IE6下的圆角菜单问题

一般做导航只需要并排若干a标签就可以了,但是有时候在处理圆角的时候会给a标签套上无序列表ul,去年做公司网站的时候就是用的ul套a标签给导航加圆角的,按理说应该是个非常常见的办法,但是当时在IE6下测试的时候,却出现了个很奇怪的BUG:li中的a居然直接扩充到了最大宽度,而并非并排排列,如下图:


在比IE6更高级的浏览器中是这样显示的,也是我期望的样子:



由于当时老板催的很急,在诧异了下之后,干脆给每个li加了class,然后分别定义宽度定死,承认这是个非常非常恶心的方法,但是当时也没时间去多研究,只顾着赶紧弄完。(但是后来时间充裕了也没那个闲心去管那个BUG了,我真懒。。)


直到后来做另外一个站的时候我又用ul套a标签做每个tab的圆角处理,在IE6下面又出现了上述BUG,我就很纳闷了,这次调了很长时间都没有结果,直到我弃用ul套a标签的方法,而改用每个a标签内套span的方法加圆角,问题才得以解决,所以,在之后的很长一段时间,我都认为用ul套a标签做导航都会出现IE6下的那个很莫名的BUG


但是最近我却发现有很多网站同样也是用ul套a标签做导航的,却在IE6下显示正常,然后我意识到问题的存在,刚调试了很长时间(本来还打算看电影的。。),把css一样一样去掉,在IETester里测试,由于IETester不方便调试,而且vista下又不能装IE6+IE WebDeveloper来调试,于是去装了个SuperPreview,这玩意一直都没怎么认真用过,今天倒用上了。


折腾了许久,当我去掉a标签的height属性时,居然就显示正常了!这怎么看也是width的问题啊,到后来居然是因为height引起的,真是让人匪夷所思。


然后我就很莫名其妙的被雷到了。。。

没有评论: