兼做美工之导航条制作过程分享

在Web开发中，CSS的编写往往是一个既富有挑战又充满乐趣的过程。尤其是当涉及到浏览器兼容性时，我们经常会面临一些独特的问题。针对IE6这类老版本浏览器，更是如此。让我们一起一下在此过程中遇到的两大难题及其解决方案。

一、浏览器兼容性挑战

在CSS的世界里，cursor（光标样式）的差异性常常给我们带来困扰。以IE6为例，其在处理cursor时的表现就颇为独特。开发者在li层设置鼠标形状为手指时，IE6可能会“无视”这一设置。即使向复层的ul、div设置也无效。当尝试在li内部的div进行设置时，奇迹出现了——手指形状的鼠标出现了。这种情况让开发者们对IE6的DOM方式产生了新的理解：在IE6dom的时候，设置鼠标形状需要作用于标签内有内容的第一个父元素。这种现象在其他方面可能也存在。

二、IE6的PNG背景图片透明问题

在IE6上，PNG图片默认是不透明的。为了解决这个问题，我们需要利用IE特有的滤镜效果来实现PNG图片的透明化。为了兼容其他浏览器，我们还需要使用CSS hack技巧。具体来说，就是使用IE特有的CSS符号（如），在特定的CSS属性下针对IE6进行特别设置。例如，通过`.mun_contant`这个类来实现背景图片的设置，而当遇到IE6时，html下的.mun_contant会覆盖上面的设置。这样，IE6就能正确地显示透明的PNG背景图片了。但需要注意的是，使用这种滤镜可能会导致背景图片的position设置失效。为了解决这个问题，我们可以选择移动包含背景图片的div块来实现居中。

这个导航项目还有一个难点：由于未使用标签，我们需要自行实现页面跳转、标签选中状态以及确保选定的标签不受鼠标移进移出的影响。为了实现这些功能，我们可以利用JavaScript和jQuery的相关方法。例如，通过绑定点击事件实现页面跳转，通过加载监控匹配地址栏地址来选定li标签，以及利用jQuery的addClass()方法叠加class来分离鼠标事件和click事件。