今天在处理网站 《建迅教育》首页和网络课堂级联的时候发现了一些关于TABLE外套<A>标签出现换行,以及LI里3像素的问题,研究了半天终于找到解决问题的办法了,现在吧问题总结一下:
默认<a class=""><table></table></a>用这样的代码在做JQUERY级联菜单的时候会发现IE8下面没有任何问题,但是到了IE6和IE7下面就出现很多空白,解决办法是:
<a class=""><div><table></table></div></a>这样各样就不会出现问题了,具体原因也不太清楚,可能是因为TABLE是块级元素吧。
但是上一个问题解决了,又发现级联菜单之间还是有间距,查找了半天才发现原来只有在IE6和IE7下才有这个问题,那么问题到底出现在哪里呢?
有别于IE3像素问题!
不光是LI,容器元素都有这个问题!
现象:LI里有浮动对象而LI本身不浮动的时候,IE里就会有2像素的下边距
解决:1、设定LI的浮动;2、IE HACK
推荐使用方案1,设置LI的宽度和浮动
方案2代码参考:
*html .xuxiao li{margin-bottom:-2px;}/**IE 6**/
*+html .xuxiao li{margin-bottom:-2px;}/**IE 7**/
相信大家看了上面的资料就明白问题所在了,原来是IE的一个BUG,解决这个问题最好的办法就是用第一种办法解决,例如我的解决方式如下:
<li style="float:left; width:256px;"> 这样一来,级联菜单之间的间距就没有了。效果如下:
终于写完了,今天因为这两个小问题,浪费了我半天的时间,希望能对其他遇到相同问题的朋友带来帮助。如果大家有其他问题想与我交流可以登录我们的网站:西安网站建设,西安网站优化
点击打开链接以后,点击在线QQ客服可以直接与百翔网络进行对话。