近日,在我们网站(http://www.hbsc.cn/)的职位搜索列表页面(http://www.hbsc.cn/members/pworklist.aspx)的浏览器窗口底部增加了一个到行业招聘频道的链接入口,用来推广我们的行业频道,如下图所示(红边框勾选的部分我的div+css笔记二_休闲 )。

其最右侧,有一个回到顶部(TOP)的链接,此处是在此面的顶部设置了一个锚点,点击后到达这个锚点的位置,从而得到回顶部的效果。

但真正完成后,却发现锚点的位置有一个较大的空白区域,如下图所示我的div+css笔记二_休闲_02

左侧红色边框勾选为设计稿的效果,右侧蓝色边框勾选为拆分页面时的效果(有一定的高度的间距),经过测试,发现将锚点的高度、行高、字体大小等样式均重置为0,即可达到原设计稿的效果。分析其原因,个人感觉原因可能出现在锚点的<a>标记上,因为锚点是由<a id=”” name=””></a>形成的,虽然在此<a></a>标记中没有文字等信息,但由于设置了相应的字号、行高等原因而撑开了高度。