解决CSS浏览器等宽空间问题

然而，它不是很可靠。比如空格之间的空间很大，我们必须添加更多的占位符，页面的体积就会变得很大。同时注意Safari中的宽度是设定字符的空格宽度(Safari中默认字体为Times)，这意味着一个汉字需要两个占位符。详情如下图所示：。

其实这不是Safari的问题，而是字体的问题。解决方法是使用以下属性font-family : ' Tahoma '；将Safari的默认字体设置为“Tahoma”和其他与中文和英文一样宽的字体。对于Windows版本的Safari字体设置，需要直接使用中文名称“Tahoma”而不是“Simsun”(知道原因请告诉我)。但到目前为止，我们的根本目标还没有解决，那就是能否避免使用这样的占位符，使用“原生”空间。考虑到空白对应的CSS属性，详细了解空白的用法，接下来会更容易处理。总结一下用空格实现等宽空格的条件，有两个。设置相应的属性white-space : pre；然后设置等宽字符(包括等宽空格)。综合起来，就是这样。font-family:' Tahoma '，Simsunwhite-space : pre；因为使用的是中文CSS名称，所以在实际使用中需要考虑样式的字符编码。同时还要考虑Mac是否有“宋体”(或者其他同样宽度的字体)。请帮助你有Mac的兄弟测试一下。- Split -感谢Pony提供了另一个想法，那就是使用em单位。1em简单来说，可以认为是一个字符宽度；同样， 5em也是半个字符。那么，上面的情况可以这样写。Span buy ins class='半字'/ins宝ins class='半字'/ins shell: /spanbr /span我的淘宝：/spanbr /span club ins class='双字'/ins区：/span br/对应的CSS应该是。半字{width:5em. }。两个字{ width:2em}通过测试。-拆分-鉴于以上两种不同的方法，我个人认为应该根据实际情况考虑采用。比如第一种方法，虽然依赖等宽的特定字体，但不增加其他额外的结构，这样会更方便以后的维护；第二种方法，更多的是考虑实际应用情况(同时不需要依赖等宽的特定字体)，但也增加了额外的结构。因此，考虑到未来的可维护性，从语义角度分析，强烈推荐第一种方法。在实际应用中，当应用复杂时，个人会选择第二种。