CSS 浏览器的等宽空格问题解决_经验交流

但是   也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大。

同时,注意到 Safari 中的   宽度是已设定字符的空格宽度(Safari 的默认字体为 Times),也就是说一个中文字符需要两个占位符。

具体情况如下图所示:

其实,这不是 Safari 的问题,而是字体的问题。解决的方式就是使用下面的属性

font-family: '宋体';将 Safari 的默认字体设置成“宋体”等中英文等宽的字体,就能解决。Windows 版本的 Safari 字体设置,需要直接使用中文“宋体”这样的名称而不是“Simsun”(了解原因的兄弟请告诉我)。

但至此,我们的根本目标没有解决,就是能否避免使用   这样的占位符,而使用“原生”的空格。考虑针对空白的相应 CSS 属性,具体了解有关 white-space 的用法,接下来就比较好处理了。

总结下使用 white-space 实现等宽空格的条件,有两个。需要设置对应的属性

white-space: pre;

然后设置等宽字符(包括等宽空格)即可。综合起来,就是这样

font-family: '宋体', Simsun;
white-space: pre;

由于使用了中文 CSS 名称,所以在实际使用中需要考虑样式的字符编码问题。同时,需要额外考虑的是,苹果机是否有“宋体”(或者其他等宽的字体),有苹果机的兄弟请帮忙测试下。

--Split--

感谢 小马 提供的另外一个思路,就是使用 em 单位。1em 简单的说,就可以认为是一个字符宽度;同理,.5em 就是半个字符。那么,上面的情况就可以使用这样写。

<span>买<ins class="half-word"></ins>宝<ins class="half-word"></ins>贝:</span><br />
<span>我的淘宝:</span><br />
<span>社<ins class="two-word"></ins>区:</span><br />

对应的 CSS 应为

.half-word {width: .5em;}
.two-word{width:2em;}

经测试通过。

--Split--

针对这上述的两种不同方法,个人认为应当按照实际情况考虑采用。比如第一种方法,虽然依赖具体的等宽字体,但没有添加其他额外的结构,对于以后的维护会更加的方便;第二种方法,则更多的考虑了实际的应用情况(同时也不用依赖具体的等宽字体),但是也添加了额外的结构。

所以,如考虑到以后的可维护性,同时“语义”的角度上分析,推崇第一种做法。而实际的应用情况下,同时需要应用比较复杂时,个人会选用第二种。

时间: 2024-09-19 23:59:32

CSS 浏览器的等宽空格问题解决_经验交流的相关文章

多浏览器支持CSS 容器内容超出(溢出)支持自动换行_经验交流

CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行,CSS容器内容超出(溢出)自动换行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]_经验交流

在蓝色上看到这篇文章的,感觉作者总结的不错,至少有些偶自己也没有真正的认识过.这些 东西的确是应该好好总结一下的,可惜偶这人比较懒,收藏整理于此,便于自己学习! 1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用j

用CSS floats创建三栏页布局_经验交流

三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法.用绝对定位的方法从

Web2.0下XHTML+CSS 设计需要注意的地方小结_经验交流

注意事项: 1.除选择DOCTYPE之外的语句必须使用小写英文字母书写.其中包括 Macromedia Dreamweaver 生成的鼠标动作,如 OnMouseOver 也必须修改成 onmouseover. 2.XHTML语法规要求所有的标识都必须有开始和结束.例如<body>和</body>.<p>和</p>等,对于不成对的标识,要求在标识最后加一个空格,然后跟一个"/".例如<br>写成<br />.<

淘宝段正淳的css笔记大全第1/4页_经验交流

试想过总结出这几年来写css与xhtml的经验 ,汇总成一片"旷世奇文"分享给大家.无奈寡人年世已高,真是有点力不从心了.于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了. 现在就来说个淘宝首页上的一个小技巧. 类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种. 背景图在a标签设置一个padding 用宽1px高不等的背景图来position到右侧.缺点:最后一个还是要用class来隐藏掉背景. 符号在每个a标签之间用"|"符号来填充.缺

CSS规则层叠的应用 css必须要注意的几点_经验交流

理论基础是必要的,实践是提升和理解理论的方法,两者同样重要,任何设计和开发人员离开这两者的平衡,不论偏向哪一方,都会范或左或右的错误.不过我所讲的这个方法在实际应用中到底有什么用呢.显然,它不能够给我们创造出圆角矩形,也不能够给我们创造出分列布局,更加不可能给我们一个固定在文档头部的导航栏.这个算法的实践应用在于: 良好的CSS编程规范 .这是一个宏观的实践,与我刚才提到的微观实践同样重要,但却更加难以掌握. 本文并不想包含所有的良好的CSS编程规范,也不可能,我所能够提供的也只是我个人编写CS

div+css详解定位与定位应用_经验交流

Mozilla Opera Netscape Firefox IE6 Windows Style CSS 看右上角的内容,不论浏览器怎么滚动,它始终在那个地方! 看右上角的内容,不论浏览器怎么滚动,它始终在那个地方! 看右上角的内容,不论浏览器怎么滚动,它始终在那个地方! 看右上角的内容,不论浏览器怎么滚动,它始终在那个地方! 看右上角的内容,不论浏览器怎么滚动,它始终在那个地方! 看右上角的内容,不论浏览器怎么滚动,它始终在那个地方! 看右上角的内容,不论浏览器怎么滚动,它始终在那个地方! 看

CSS规则层叠时的优先级算法_经验交流

inline style  embeded style  external style  user style  inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦.它们往往以这样的面目出现: <p style="color:red;">This is a paragraph.</p> embeded style比inline style绅士一些,它们也寄宿在HTML文档中,但是它们不屑于与HT

CSS样式表的背景渲染效率_经验交流

我的MzTreeView1.0树控件发布至今,得到了不少意见反馈,很多网友给了我很多的中肯的建议,也指出了这个控件里的诸多BUG和不足之处,所以我准备写一个新版本的树,将大家的建议都整合进来实现.这几天我就一直在写新版的树,树控件最重要的是效率,特别是大节点量的时候,效率稍微差点的模式就会拖垮浏览器,所以新版的树我首要的还是提高效率,比如增加异步数据加载的支持等,另外我还有一个设想,就是树的树型结构竖线用样式表(背景图)来实现,样式表背景图片只需要加载一次,而现在这个模式(用多个<img>)图