父级定义class减少请求数和IE6中a元素问题

日常工作中时常会遇到一些小问题,这些“问题”甚至算不上时问题,因为一定会有方法解决他们,或是添加额外的标签,或是对它们再次定义属性等常规思路,但通过一些小方法来解决这些问题,有时候却能令代码更简洁,或是结构更语义化,起到事半功倍的效果。 例一:

例一图片

在上图中,如果给每个列表项都赋予一个class,那即使在定义class的值时选择符分组也将是不小的工作量。在这种情况下,我们将所有的icon放在一张整图中按照图中次序排好,仅需要对ul标签定义一个背景,只有一次Http连接,即减轻了对服务器的压力,也缩小了代码的体积。

例二图片

上图是拍拍首页上“所有分类”下拉框中一条类目的鼠标经过效果,而在IE6下鼠标只有经过文字才有效果,所以必须给a标签定义width:100%;但因为a标签定义了左内补白(padding-left),所以为了避免将容器撑宽,常规的方法是给父级元素定义overflow:hidden;其实还有种方法,给a标签定义text-indent(文本首行缩进,该属性仅对块级元素作用),这样就不必考虑宽度过宽会把父元素撑开了(工作中经常做width减padding的运算,极其耗费时间)。 上面的两点只是在工作中用到的小伎俩,有时候却能带来大方便。其实只要亲自动手,不断的尝试,总会发现一些更好的方法。
posted @ 2009-10-26 00:06  nicholaslai  阅读(180)  评论(0编辑  收藏  举报