如何在所有浏览器中获得 段落文本的一致性呈现？答案

【问题标题】：How to get consistence rendering of paragraph text in all browsers?如何在所有浏览器中获得 段落文本的一致性呈现？
【发布时间】：2010-03-28 21:16:59
【问题描述】：

如何获得一致性渲染

所有浏览器中的段落文本？

查看这样的 IE 7 渲染

和 FF 一样。这对客户来说没问题

如何在两个浏览器中获得相同的结果，我的意思是 IE 中的 FF 渲染？我的客户在所有浏览器的同一行中都需要“非执行”，  是唯一的解决方案。

我已经在使用 XHTML 1.1 doctype 和 eric meyer reset CSS

更新：3 月 28 日

感谢所有回复！

我测试了这个问题只是没有出现在 firefox 上。但适用于所有其他浏览器 IE6、7、8、Safari(windows)、Google Chrome。

现在有没有可能只使用 css 的解决方案？

【问题讨论】：

【解决方案1】：

对于您的具体问题，请在您的文本周围使用 标签，或使用 CSS 的 span

whitespace: no-wrap;

这将防止非执行人员越界。

但是，您应该注意，在浏览器和平台之间获得完全一致的渲染是相当困难的。

【讨论】：

【解决方案2】：

更新

您很可能在元素的左侧和右侧同时设置了固定宽度和填充。由于盒子模型的不同，IE 和 Firefox 会以不同的方式解释。如果您无法重新编码您的页面以使用固定宽度和左右边距，那么您将需要在仅限 IE 的样式表中指定不同的固定宽度以弥补该问题。

教育

Web 开发与教育有关。大部分教育是在教育您的客户了解期望和不期望什么。

向您的客户解释每种浏览器和操作系统组合处理字体的方式略有不同，以提供帮助。一个引擎可能会使字母彼此之间的距离比另一个引擎稍近。

您可以投入大量工作来使其恰到好处，但如果您的最终用户完全放大了他们的字体，那么花费在确保一个连字符单词保持在同一行上的所有时间和金钱都会浪费掉。

技术思路：两种浏览器似乎都已经尽可能接近地呈现文本，我认为reset.css 根本不会帮助您。

【讨论】：

我意识到这可能不是一个技术性的答案，但反对者能否解释我所说的哪一部分是错误的？
并不是说我不赞成，但我相信这是一种完全相同的布局无法实现的情况，因为文本在不同的地方呈现不同浏览器/平台。
大声笑......任何时候有人挑战反对票，其他人都害怕回答......对不起@Georg！您所说的是我试图传达的内容，尽管正如我在@cletus 答案的 cmets 中提到的，两个文本区域的内部宽度看起来不同。但是，一般来说，在这个级别进行文本操作是浪费时间。
Cletus 的回答似乎也无缘无故地被否决了，所以你的公司很好。我觉得有时人们只是因为他们可以投票，所以投反对票。
是的，我也被否决了。当有几个类似的答案很少赞成时，这似乎发生了很多。有人决定用匿名投票来改变随机顺序。我认为随机顺序使情况变得更糟。

【解决方案3】：

重置所有样式以消除浏览器样式表中的差异可能是个好主意。 YUI 的reset.css 可以为您做到这一点。然后你可以从头开始格式化你的段落，使用字体大小、间距等的百分比（参见YUI CSS cheatsheet）。

编辑：刚刚看到您对 cletus 回答的评论。那么：您使用什么 CSS 来布置文本？

【讨论】：

【解决方案4】：

这实际上与边距、填充、字体、重置或任何 CSS 无关。这是关于浏览器如何解释连字符的。 IE 显然决定它可以在连字符上换行，而 Firefox 将其视为一个单词。

就像 McPherrinM 所说，您可以使用不间断标签：non-executive。或者您可以完全删除连字符。

或者您可以只向您的客户解释所有浏览器和系统如何以不同的方式呈现文本，而您无法阻止这种情况在所有情况下发生。分两行有什么问题？

【讨论】：

【解决方案5】：

您可能会考虑使用软连字符 &害羞

【讨论】：