博客

HTML的特殊字符我们并不常用，但是有的时候却要在页面中用到这些字符，甚至有时候还需要用这些字符来实现某种特殊的视觉效果。现在，国外的设计师Neal Chester整理了一份很全的特殊字符集，我觉得这很赞～～，共享出来供大家查阅吧。

http://www.qianduan.net/html-special-characters-daquan.html 中文翻译

http://ikwebdesigner.com/special-characters/ 原文

使用方法：
· 这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；

· 下面符号列表的后面有两列编号，它们并不太一样，第一列是用于HTML的，你需要在前面加上&#符号；

· 第二列可以用于CSS文件中，但是需要用反斜杠\转义；

· 第二列也可以用于JavaScript，和CSS用法一样，不过要用\u来转义。

需要主意的是：
· 有的字符在不同的浏览器下表现不太一样；比如小雪人 ☃ 在Firefox和Chrome下不太一样，钻石 ◆ 在IE下要比Chrome下要大一点儿；

· 有的字符在某个浏览器下不会显示；当然原因并不是字符代码的问题，而是浏览器的bug，比如，–在Chrome下。。。

· 但是，98%的字符都能在所有浏览器下正常显示的，不过如果你真的要使用，最好仔细在各个浏览器下验证一番。

· 经测试这些字符在Android/iOS等智能终端的识别度比较差，所以，使用的时候要特别注意移动浏览器～～

各种箭头
· ⇠ 8672 21E0

· ⇢ 8674 21E2

· ⇡ 8673 21E1

· ⇣ 8675 21E3

· ↞ 8606 219E

· ↠ 8608 21A0

· ↟ 8607 219F

· ↡ 8609 21A1

· ← 8592 2190

· → 8594 2192

· ↑ 8593 2191

· ↓ 8595 2193

· ↔ 8596 2194

· ↕ 8597 2195

· ⇄ 8644 21C4

· ⇅ 8645 21C5

· ↢ 8610 21A2

· ↣ 8611 21A3

· ⇞ 8670 21DE

· ⇟ 8671 21DF

· ↫ 8619 21AB

· ↬ 8620 21AC

· ⇜ 8668 21DC

· ⇝ 8669 21DD

· ↚ 8602 219A

· ↛ 8603 219B

· ↮ 8622 21AE

· ↭ 8621 21AD

.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */

* html,* html body /*

修正IE6振动bug */{background-image:url(about:blank); /*用浏览器空白页面作为背景*/
background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/

}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

另附：以上为boahy博客的，今天在本地原来一个项目加效果的时候，在IE6和IE7中会出现底栏水平右移。

小结：不要在body里面加text-align:center; 因为很多时候想让外层content居中，有方法是加个text-align：center，这会导致在IE6 与IE7中模拟底栏水平右移。

纸上得来终觉浅，绝知此事要躬行啊。哈哈

前一段时间转载了篇，如何去除虚线框的。当时有提示说对于盲人虚线框是有作用的。但是具体什么作用，不知道。幸好今天看到了这篇文章。就再次转载过来

原文地址http://ued.taobao.com/blog/2011/04/15/onfocus-this-blur/ 淘宝ued

—————————————————————————————————————————————————————

杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。杨同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时，他对我们前端的同学特别的强调：他最深恶痛绝的就是页面链接上有 onfocus=”this.blur()” 这句代码，这从何说起呢？

(图一)

各位同学，看到这句代码有没有觉得眼熟，对的，你懂的，我们常用它来去除链接取得焦点时外围出现的虚线框（如上图一），google一下，前面几十页谈的都是这个去除虚线框的技巧。但我们也许以前从未想过：我们的这行代码给盲人用户们带来了巨大的困扰：这中断了盲人用户的Tab键路径，导致Tab光标无法聚焦页面的下一个控制器（链接、表单域、object、image map等）。测试如下：

第一个链接
第二个链接
第三个链接
第四个链接
第五个链接
第六个链接

按下Tab键，第一和第二个链接都可以正常获取焦点，继续Tab到第三个链接时，悲剧出现了：此时焦点会回到第一个链接，而无法Focus到第四个链接，原因是当Focus到第三个链接时，onfocus=”this.blur()” 事件处理强制触发了失焦，焦点重新回到文档的最开始。于是不停按Tab的结果就是焦点在前面三个链接轮流转，后面的内容通过Tab键无法访问[1]。

（图二）
那么，有更好的方式吗？从根源上看，加onfocus=”this.blur()”是为了去除链接获取焦点后外围的虚线框（当然chrome、safari、opera下的focus效果各异，这里姑且就这么叫吧 ）。W3C关于Outline的文章里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得，虚线框的存在有它的合理性，但有时你也许无法回避某些”视觉洁癖”需求（如图二：虚线框使“商品”背景和下面的红色色块分隔开了），以下总结了去掉虚线框的几种常用方法：

去除虚线框的方法优劣兼容性是否中断tabthis blur链接聚焦触发时失去焦点，js和html耦合在一起没有兼容性问题是a:focus {outline:none}或
a{outline:none}outline由css2.1引入，去除虚线框视觉上的问题正是css的职责ie6/ie7不支持,ie8+/ff /safari/opera[2]支持否hidefocus该属性是ie的私有属性[3]ie5+支持否a { noFocusLine: expression(this.onFocus = this.blur())}可批量处理，但expression的性能问题不能忽视expression ie6/7支持，ie8+、非ie不支持是
综合以上，去除链接虚线框的推荐方法是：ie下用hidefocus属性，ff/chorme/opera/safari下用outline:none。即:

链接
a:focus {
outline:none;
}

杨永全同学无奈地说，如果页面因为onfocus=”this.blur()”导致tab无法访问页面全部内容，争渡读屏软件在读取页面之前会强制过滤掉这个属性，但是如果用户是在js里面动态触发this.blur(),读屏软件又要出新招来克制了。这无疑增加了读屏软件的开发工作量，为了让盲人用户们能更顺畅的访问我们的网站，尽量避免使用onfocus=”this.blur()”哦。

注释

[1]Safari默认情况下，按tab键是不会focus链接的，但会focus表单域，在偏好设置-高级勾选“按下tab以高亮显示网页上的每一项”可开启该功能。Opera比较特殊，它通过shift+上下左右方向键可以向上下左右focus页面焦点。

[2]在Opera下点击链接（focus和active状态）时都不会出现所谓的虚线框，所以Opera下链接的虚线框问题可以不计。 Opera 通过shift+上下左右键产生的线框通过outline:none并不能去除，但是Opera支持outline这个属性。

[3]hidefocus属性是ie的私有属性，虽然hidefocus属性有true or false两个值，但测试结果是ie5-ie9不管其值为true or false, 只要添加hidefocus属性，该链接都会失去虚线框。