考虑以下 HTML 代码。
<!DOCTYPE html>
<html>
<head>
<title>Smileys</title>
<meta charset="utf-8">
</head>
<body>
<p>Smiley 1: ⊙_⊙</p>
<p>Smiley 2: ⊙ ﹏ ⊙</p>
<p>Smiley 3: ⊙﹏⊙</p>
</body>
</html>
(见http://jsfiddle.net/teVrP/的输出)
在此处查看输出:
笑脸1:⊙_⊙
笑脸2:⊙﹏⊙
笑脸3:⊙﹏⊙
上面的代码试图显示三个笑脸,其中每只眼睛使用 Unicode 字符 U+2299(圆点运算符)。
当使用 Firefox 22.0 呈现此 HTML 时,第三个笑脸中的右眼看起来比其他眼睛大。
事实上,只要 U+2299(圆点运算符)紧跟在 U+FE4F(波浪低线)之前,圆点运算符就会显得更大。使用此代码可以看到这一点。
<!DOCTYPE html>
<html>
<head>
<title>Circled dot operator</title>
<meta charset="utf-8">
</head>
<body>
<p>⊙ ﹏⊙ ⊙﹏ ⊙</p>
</body>
</html>
(见输出:http: //jsfiddle.net/L76Q8/)
在此处查看输出:
⊙ ﹏⊙ ⊙﹏ ⊙
当使用 Firefox 22.0 for Windows 呈现上述代码时,第二个带圆圈的点运算符看起来比其余的要大。
在 Firefox for Windows 上呈现的两个页面的屏幕截图:
但在 Windows 版 Chrome 上,页面显示正常:
这些页面在 Debian 的 Iceweasel 17 上也显示得很好。
为什么在 Firefox for Windows 上 U+FE4F(低波浪线)前面的 U+2299(带圆圈的点运算符)会显得更大?如何解决这个问题?