文档章节

最简单的兼容firefox和ie的锚点方法

harries
 harries
发布于 2014/06/26 10:37
字数 1877
阅读 89
收藏 5
点赞 0
评论 0

在需要指定到页面的特定部分时,标记锚点是最佳的方法

这是在设计网站时经常遇到的情况,你想链接到某个页面的特定部分,可是使用者正在阅读的可能是在另外的一个页面,接下来讨论的四种方法之中任选一种都能让你达成目标.

在示例中,假设我们打算链接到同一个页面中的特定标题:

方法A:空洞的名称

<p><a href="#oranges">About Oranges</a></p>

...一些文字...

<a name="oranges"></a>

<h2>Oranges Are Tasty</h2>

...更多文字...

使用一个内容空白的锚点标签再配上name属性,标记特定的链接点,或许这是你熟悉的方法,在标题前放一个内容空白的<a>,并且连向它(使用#符号,后面加上name属性的值),就能让我们连到页面的特定部分了,当页面包含了很长需要滚动的项目清单时,我们能通过这个方法十分方便的连到特定的项目.

效果不错,但是浪费一个内容空白的标签来标识链接位置有点不合语义,方法B能改进这点.

方法B:全部在名称之内

<p><a href="#oranges">About Oranges</a></p>

...一些文字...

<h2><a name="oranges">Oranges Are Tasty</a></h2>

...更多文字...

与方法A一样,我们仍然使用<a>标签配上name属性,但这次我们把它包在我想要链接的标题外面,这么做看起来的确比较符合语义,在方法A里头,我们的连接对象是...恩,什么都没有,但是在方法B里,我们不仅说明了这段文字是标题标签的一部分,同时也是这个页面的连接锚点之一.

小心<a>的全局样式

如果使用了方法B的话,有个地方必须要注意.如果你为所有的<a>元素指定了全局的CSS样式的话(颜色,文字大小,文字装饰等等),这些样式就会覆盖你为<h2>元素指定的样式.会发生这种情况的原因是,在这个例子里头,<a>标签是位于包围它的<h2>标签之内的子元素.

举例来说,假如你的CSS内有类似这样的声明:

a{

color:green;

font-weight:bold;

text-decoration:underline;

}

方法B配上这段CSS就会让标题与其他页面内的<a>一样变成绿色,粗体,加上下划线,或许与你期望的<h2>样式不同.

我们能使用<a>的:link伪类以避免这种现象(同时也能获得其他好处),在本章稍后的"技巧延伸"中会详细讨论.

更丰富的名称属性

使用方法B(以及方法A)的好处之一,就是name属性可以处理更丰富的锚点名称,具体来说,就是能在名称之内使用符号

举例来说,如果使用方法B的话,你可以这么做(在此&#233;代表符号"e"):

<p><a href="#resum&#233;">My Resum&#233;</a></p>

...一些文字...

<h2><a name="resum&#233;">Dan's Resum&#233;</a></h2>

...更多文字...

在处理不属于英文字母的字符时,这个功能十分重要.

但是还有几个方法值得一提,下面这个方法完全不需要使用<a>设定锚点,让我们看看方法C.

方法C:丢掉名称

<p><a href="#oranges">About Oranges</a></p>

...一些文字...

<h2 id="oranges">Oranges Are Tasty</h2>

...更多文字...

啊哈,id属性的功能就像name属性,同样能为页面指定锚点,除此之外,方法C还消除了方法A,B使用name属性是需要的额外<a>标签,我们减少了源代码,这向来是好事.

由于id属性可以加到任何标签里,因此我们能轻易地在页面内任意为需要的元素加上锚点.在这个例子中,我们选择为标题加上锚点,但我们也能同样轻易的为<div>,<form>,<p>,<ul>...还有其他所有标签加上锚点.

一石二鸟

事实上,在大多数情况下,我们都能为先前存在id属性添加样式或者scripting,这是方法C的另一个好处.由于这个缘故,我们不需要为仅仅设定锚点而加上额外的代码.

举例来说,让我们假设你在很长的页面底部有一个用来留下评论的表单,而你想在页首加上链接,这个表单已经为了指定独特样式而设了id="comments".这是我们能直接把id当作锚点进行连接,而不必再加上有name属性的<a>标签.

代码看起大概类似这样:

<p><a href="#comments">Add a Comment!</a></p>



...很多文字...



<form id="comments" action="/path/to/script">

...表单元素...

</form>

同时,如果你的页面很长,那么你在底部加上链接到顶部锚点的链接,以便用户"回到顶部".

值得一提的是:虽然看起来十分合适,但最好避免在指定锚点名称时使用"top",有些浏览器保留这个名称做为特殊用途,那么使用这个名称可能会造成不一致的结果,最好选择一个类似,但又不会造成问题的名称,或许用#gemesis?还是用#utmost?你自己拿主意了.

古老浏览器与id属性

只使用id属性当作锚点时,有个重要的缺点值得一提,那就是某些古老的浏览器并不支持这个方法.哦喔,在标识你自己的锚点时这的确是个必须考虑的问题,同时这也是向前兼容的不幸示例.让我们看看最后一个实例,方法D.

方法D:合而为一

<p><a href="#oranges">About Oranges</a></p>

...一些文字...

<h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2>

...更多文字...

如果在标记锚点时,你希望达到向前兼容和向后兼容,那么你大概会喜欢这种方法.不管是古老的或是未来的浏览器都能正确的辨识具名锚点标签,但是由于W3C在XHTML1.0建议书中不推荐使用name属性(http://www.w3.org/TR/xhtml1/#C_8),因此你也用id属性支持未来的浏览器.

与方法B相同,我们必须留意对<a>标签造成影响的全局样式.

共享名称

如果你选择使用方法D的话,为id与name属性选用相同名称完全可以被接受(可能也十分便利),但是只在它们位于相同标签时才能这样.此外,也只有几个特定的标签允许这么做,精确来说,包含了<a>,<applet>,<frame>,<img>,<map>.因此,我们把id="oranges"从<h2>移到锚点标签之内

总之,在锚点的时候,定义name和id的名字相同就行了。

本文转载自:http://www.cnblogs.com/shlcn/archive/2011/07/20/2111480.html

共有 人打赏支持
harries
粉丝 44
博文 99
码字总数 86900
作品 3
朝阳
其他
xhEditor v1.1.8 发布,开源XHTML在线编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE6、IE7、IE8、IE9、Firefox 3.0+、Opera 9.6+、Chrome 1.0+、Safari 3.22+。 该版本主要提供以...

V
2011/07/10
0
0
全面兼容IE6/IE7/IE8/FF的CSS HACK写法

CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不...

^6^|^6^
2011/12/06
0
0
兼容Firefox(火狐)浏览器和IE浏览器的收藏代码

最近改用Firefox后,发现很多网站的“加入收藏”链接点击无效了,后来发现原来是IE浏览器和Firefox浏览器的“加入收藏夹”的写法是不同的。 1、IE浏览器加入收藏夹的代码 window.external.ad...

海纳百川
2011/11/13
0
1
java的http连接中,如何改变User-Agent

java 的 URLConnection能够方便我们获取internet/intranet上的资源。而HttpUrlConnection 则是特别为我们连接http服务器,上传数据,下载文件而设计的;HttpUrlConnection会为我们组织正确的...

穆哥哥
2013/07/10
0
1
DIV+CSS解决IE6,IE7,IE8,FF兼容问题

1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了: 1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="I...

罪恶的花生
2012/05/06
0
0
写css样式时遇到的一些问题及体会

昨天写了一个主页,很久没怎么写样式了,感觉有点生疏了,最恶心的是浏览器的兼容性问题,我只做了火狐和ie8的兼容性,但做起来还是挺麻烦的。 在组合图片的时候,就遇到组合不上,总有误差,...

java_T
2012/11/22
0
4
Web开发框架--jsHawk

一个开源Web应用程序开发框架,兼容IE 9+,火狐,谷歌等主流浏览器. 特性: 1.使web程序支持后退和前进操作 2.访客通过含有锚链接的地址访问页面时能得到预期的页面 3.锚链接按 "类/方法/参数" 的...

颜风
2013/10/07
499
0
JavaScript的浏览器兼容性问题小结。

JavaScript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题:1、常用的...

MiniBu
2012/10/11
0
6
浏览器兼容的获取event.offsetX的最简单方法

很多时候,我们都需要获取event.offsetX数值,但是Firefox的event不支持offsetX属性,这给我们造成了一定的困难,虽然Firefox提供了一个layerX属性,但是该属性需要和CSS的position属性配合才...

李玉珏
2015/04/01
0
1
CSS Hack 浏览器兼容写法 用法

CSS Hack 不得不在一些项目中运用到。jquery博客也遇上了,关于二次开发的一个3D地图,其实也想好好写代码兼容,苦于上头要东西,短期不可能实现,没法子,回归css hack 吧。 为了调试尼玛的...

天外飘雪
2012/09/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

10.28 rsync工具介绍 , rsync常用选项, rsync通过ssh同步

rsync远程同步 重点!重点!!重点!!! 例子 • rsync -av /etc/passwd /tmp/1.txt • rsync -av /tmp/1.txt 192.168.188.128:/tmp/2.txt rsync格式 • rsync [OPTION] … SRC DEST • rs......

Linux_老吴
15分钟前
0
0
iis php 环境搭建,非常详细的教程

准备篇 一、环境说明: 操作系统:Windows Server 2016 PHP版本:php 7.1.0 MySQL版本:MySQL 5.7.17.0 二、相关软件下载: 1、PHP下载地址: http://windows.php.net/downloads/releases/ph...

T_star
17分钟前
0
0
Day35 rsync通过服务同步

rsync通过服务同步 rsyncd.conf配置文件详解 port:指定在哪个端口启动rsyncd服务,默认是873端口。 log file:指定日志文件。 pid file:指定pid文件,这个文件的作用涉及服务的启动、停止等...

杉下
23分钟前
0
0
【最新最全】为 iOS 和 Android 的真机和模拟器编译 Luajit 库

编译 Luajit 库,的确是一个挑战。因为官网的教程,在当前版本的 Xcode 和 NDK 环境中,已经不适用了。以前只是编译了适用于真机的 Luajit 库。最近在尝试编译模拟器 Luajit 库,就顺便梳理了...

ios122
23分钟前
0
0
rsync至ssh同步

rsync: 文件同步工具,可实现“增量拷贝”;使用yum安装rsync包 常用选项:-a=-rtplgoD (-r同步目录,-t保持文件的时间属性,-p保持文件的权限属性,-l保持软连接,-g保持文件的属组,-o保持...

ZHENG-JY
28分钟前
0
0
TradingView 学习笔记

#前言 公司最后需要使用TradingView展示K线图走势。由于之前没接触过,拿到文档时一脸蒙逼。还好找到二篇文章+Demo代码,直接改改就行了。 #被批 由于上面的懵懂,有个问题困扰4个小时没解决...

hihubs
28分钟前
0
0
10.28 rsync工具介绍~10.31 rsync通过ssh同步

rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件。rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文件的不同部分,而...

洗香香
31分钟前
1
0
php如何使用JSON-RPC查找以太坊中的最新块哈希hash值?

我用PHP中开发了一个以太坊块资源管理器,并成功地与我的服务器Geth节点建立了JSON-RPC通信。然而,当我试图找出最后一个区块时,我陷入了困境。我在https://ethereum.gitbooks.io/frontier...

智能合约
37分钟前
1
0
卷积为什么要旋转180度

参考《最容易理解的对卷积(convolution)的解释》 https://blog.csdn.net/bitcarmanlee/article/details/54729807 这篇博客详细讲解了“卷积”,提及了为什么要反转180度,我简述下。 1.卷积的...

datadev_sh
40分钟前
0
0
【2018.07.18学习笔记】【linux高级知识 20.23-20.26】

20.23/20.24/20.25 告警系统邮件引擎 告警系统邮件引擎由两个文件组成,放在/mon/mail/目录下:mail.py、mail.sh mail.py:是邮件的核心python脚本,邮件功能的实现mail.sh:是告警邮件系统...

lgsxp
45分钟前
16
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部