, , Safari 浏览器中的替代项答案

【问题标题】： , &ensp;, &emsp; alternatives in Safari browser, , Safari 浏览器中的替代项
【发布时间】：2017-04-25 23:48:48
【问题描述】：

, , Safari浏览器坏了。

这些是薄空间、n 尺寸空间、m 尺寸空间，适用于其他浏览器。

thinsp : a b c d e f g

ensp : a b c d e f g

emsp : a b c d e f g

在 Safari 中是否有替代方案？

【问题讨论】：

只计算空格数，使用正常的nbsp？
@Steve thinsp 比 nbsp 更薄（不间断空间）。并且双空格在浏览器中不会被解析为双空格。

标签： html safari

【解决方案1】：

这可能是字体问题；为使用的固定宽度空格指定包含字形的字体可能会有所帮助。大多数字体都缺少它们。好的浏览器不需要字形，而是增加其他字符之间的间距。

但是，更可靠的方法是使用 CSS 技术来添加间距，主要是 padding 属性，对于需要在所有字母之间具有特定间距的文本运行，letter-spacing 属性。使用后者，请注意它也会在最后一个字符之后添加间距。我在Unicode spaces 上的页面显示了“固定宽度空间”的定义或典型宽度，例如 THIN SPACE（并非都是真正的固定宽度）。但最好从所需的间距量开始，以em 单位（字体大小）为单位，而忘记固定宽度的空格。

另一种可能性是使用普通的空格字符，但将其包装在span 中并设置其宽度。这需要使其成为内联块。当所需的非 CSS 后备是常规空间而不是缺少任何间距时，该方法比上述方法更好。请注意，应假定搜索引擎不了解 CSS，因此这种方法与让它们“看到”字符之间的单词空间相关（例如，当您想要在单词“foo”和“bar”）。和往常一样，您可以使用 NO-BREAK SPACE 代替 SPACE 以防止换行。

例子：

.thin {
  display: inline-block;
  width: 0.2em;
}

<div style="font-size: 200%">
<div>a b (normal space)</div>
<div>a&thinsp;b (thin space)</div>
<div><span style="padding-right: 0.2em">a</span>b (0.2em padding)</div>
<div><span style="letter-spacing: 0.2em">ab</span> (0.2em letter spacing)</div>
<div>a<span class=thin> </span>b (space set to 0.2em width)</div>
<div>a<span class=thin>&nbsp;</span>b (no-break space set to 0.2em width)</div>
</div>

【讨论】：

嗯.. 我希望 Safari 会支持这些东西。（以及其他功能。）与其他浏览器相比，Safari 在许多功能（特别是在可扩展性或负责任的网络方面）都很糟糕。

【解决方案2】：

这个问题似乎已经解决了。无论如何，我无法复制它。我用四种常用字体进行了测试。这是测试页面：

http://burtonsys.com/test_html_spaces.html

我没有 Apple 设备，但我使用了几个跨浏览器测试网站来使用 Safari 进行检查。在 Safari 9.1.3 和 Safari 7.1 中，所有空格字符似乎都可以正常工作。

【讨论】：

【解决方案3】：

我想对齐表单中的框，并在输入元素之前使用span 中的&nbsp 使用style="padding-left: 0.7em。然后我使用0.4em、0.85em、0.95em 和1.3em 调整每个 em 以对齐框，它们都与不需要任何调整的输入框对齐。

【讨论】：