CSS实现按钮效果时的IE6/Win之空白Bug
今天晚上给公司赶工写基金项目的Web页面。业务人员找了一套用ASP.NET实现的架构的CRM，套用了很多Windows控件，这样在IE下面基本实现了C/S的UI效果（当然FireFox和Opera肯定是不被支持了）。他们觉得这个风格不错，我便照葫芦画瓢。
时间越急，便越经常碰上麻烦！做menu页的时候，我用h1实现一级菜单，下拉二级菜单使用无序列表，并且通过指定锚a的伪类为block来实现按钮效果。这时候问题出现了，在FireFox和Opera里看起来好好的，但是IE不知道犯什么毛病，每个二级菜单项目下面总是多一个空行。XHTML文件看来看去都是一点问题没有，这种实现的CSS我也写过不少次了，可是这一次不知道为什么IE就是这么不合作。
想来想去，突然回忆起Zeldman大侠写的 Designing With Web Standards 里曾经提到过，IE的空白Bug。翻出book，找到原话如此：
“But in IE/Windows, the whitespace in the markup throws the buttons' spacing and positioning out of whack. To work around this IE/Windows bug, it is necessary to remove the whitespace like so: ...”
原来在使用无序列表时（使用有序列表和td等其它元素时我尚不清楚），IE经常会产生莫明其妙的空白区域，使得最终效果与预想大相径庭。当初阅读的时候并未把这段当回事，因为以前用过的li几乎从未出现过问题，可是这次真的就让我碰上了。其解决方法也很简单，只要降低一下可读性，切割li元素。比如：
<li><a target="main" href="1.html">link1</a></li>
<li><a target="main" href="2.html">link2</a></li>就改写成：
<li><a target="main"
href="1.html">link1</a></li>
<li><a target="main"
href="2.html">link2</a></li>在关闭li标签之前，在a标签里换行。根据原书的方法做此修改之后，IE下果然正常了，FT！
引用Zeldman的一句话结束：
...but we have no choice if we want our site to display correctly in an extremely popular browser...
You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.