|
解决谷歌浏览器空格宽的问题
早期做的很多网页，是用空格来产生间隔的，比如主导航上两个项目之间想空一个汉字宽度，就打两个英文空格。但HTML里两个空格也会被当成一个空格，所以我加了一个 ，来强制表示一个空格。
但谷歌浏览器不知道从哪个版本开始，将 解释为全角空格了，也就是说我原来打的 后跟一个空格或者回车的内容，现在会被解释为1.5个汉字宽度了。内容就凭空长了很多，很多网页都错位了，尤其阿江守候，IE下正常，谷歌下错位。
今天终于忍不住，搜了一下解决办法，还好，虽然无用的信息很多，但最终还是找到了方法。
把 替换成 即可。
谷歌浏览器下立即正常了，
然后怕老浏览器不支持，特意在IE6下试了下，证明是支持的，显示的很好。
以下是找到的文章原文：
HTML中6种空白空格
HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（       ‌‍）在不同浏览器中宽度各异。
它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
 
它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
 
它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
 
它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。
‌
它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌
‍
它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。
此外，浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（	）、换行（
）和回车（
）还有（　）等等。
出处：http://www.oicqzone.com/pc/2015083122336.html
其实最先找到的是这里：
https://www.cnblogs.com/bobonote/p/7220752.html
===================================
1月30日补充——
文章同时发在落伍者论坛，有好心的网友帮我打出了中文空格，让我很无奈啊。
下面是我的回复（落伍23点以后发不上，先贴在这里）：
楼上两位，我不是打不出来全角空格，DOS时代过来的人怎么可能不会打全角空格。顶楼的这个问题并不仅仅是要解决空出一个汉字宽度的问题，而是只要你的网页里有 ，它就存在在不同的浏览器中显示的宽度不同的问题。
在网页上，常常并不能使用中文空格来替代两个英文空格。
像导航条上的链接，虽然显示出来是在一行上，但在源码中一般是一个链接一行，源码里的换行本身会被显示为一个半角空格，就是说我一行一个链接，不加任何空格，显示出来两个链接之间也是有半个汉字宽度的距离的，那么我只需要再增加一个半角空格，实际显示的宽度就是一个汉字宽度了。这种情况下如果使用中文空格，就必须把所有的链接写在同一行里，或者在HTML标签内部换行，源代码的可读性就大大下降了。没错，导航链接之间的空白现在都是CSS来实现了，但我的网页是十几年前的网页啊，是个古董，如果我用现代的技术重新做一个，它就不再是古董，而是一个仿古艺术品了。并且，就算导航链接的距离用CSS解决了，其它地方也难免会有需要用到英文空格的地方，问题依然是需要解决的。
中文空格还有一个问题是它会被浏览器当成一个汉字处理，在源代码中不会像英文空格那样被忽略，要命的是在源代码中你用肉眼并不能将英文空格和中文空格区分开来，一旦它被忘记后混在源代码中，就会导致各种麻烦。所以中文空格要慎用，除非某个位置可以明确的知道它的存在（比如两个字的人名中间的空格），否则如果只是为了排版留空，我都尽量用源代码中可见的 来空出想要的宽度，以免将来修改的时候忘记了那个看不见的中文空格的存在。
其实我使用的自然码输入法输入中文空格是非常方便的，不需要切换全半角状态，汉字输入模式下直接Shift+2就是全角空格，但我还是克制自己少用。
当然了，用空格来留空的年代已经过去了，因为用来浏览网页的设备中不再是清一色的XP+IE6，并不是所有设备上都有宋体字库，并不是所有浏览器都把英文空格显示为半个汉字宽度。所以我的导航条在有些设备上是会变短的，但变短至少不会错位，像谷歌浏览器这种把我的导航变长，以致于要撑破网页的情况，还是得处理一下的。
我就奇怪你们都不使用 ？我是常常会用到的，再比如如果我想在某一行的行首空出半个汉字宽度，而HTML中行首的空格都是被忽略的，必须使用 。当然了，同样因为顶楼的问题，我的这些网页的行首留空都从半个汉字宽度变成了一个汉字宽度，如果现在旧版统计还在，这个问题就会显现出来。
唉，这个问题得不到共鸣，我估计你们很可能就没用过这个 ，或者用的很少，并没有在意这个宽度的变化。
===================================
PS: 其实，我这个古老的文章显示页面，它的段首缩进就是通过自动添加两个全角空格来实现的。
===================================
2019-2-10 补充
发现这个方法并不完全有效，对于一些精简版的XP系统，其IE6下会将ensp显示为一个全角空格，等于这个问题变得无解了。除非在服务器端判断浏览器类型并输出不同的空格到不同的浏览器上，但这显然很不现实。
===================================
2019-2-11 补充
已确认，上述问题是因为该精简系统精简掉了一些系统默认字体导致的。将完整系统的fonts文件夹覆盖掉该精简系统的字体文件夹并重启后，网页显示正常。暂时没有试具体是缺少哪个字体导致的。毕竟使用这种精简系统的人并不多，正常情况下应该不会影响网页外观。
发表时间：2019-1-29 20:26:00 点击：5042
[返回上一页]返回
[回阿江守候首页]
[回阿江动态栏目]
| 
