如何在所有浏览器中获得<p>段落文本的一致性渲染?</p>

时间:2010-02-17 05:51:46

标签: css internet-explorer firefox xhtml cross-browser

如何在所有浏览器中获得

段落文本的一致性渲染?

请参阅IE 7这样的渲染

alt text http://easycaptures.com/fs/uploaded/248/0266470505.jpg

像这样的

和FF。这对客户来说是好的

alt text http://easycaptures.com/fs/uploaded/248/8655561297.jpg

如何在两种浏览器中获得相同的结果,我的意思是在IE中进行FF渲染?我的客户在所有浏览器中都需要“非执行”,<br />只能解决此问题。

更新:查看<p> http://easycaptures.com/fs/uploaded/248/4505395091.jpg

的所有代码

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

更新:3月28日

感谢所有回复!

我测试过这个问题只是没有来自firefox。但进入所有其他浏览器IE6,7,8,Safari(Windows),谷歌浏览器。

现在有没有可能css解决方案?

5 个答案:

答案 0 :(得分:2)

针对您的具体问题,请使用文字周围的<nobr>标记,或使用CSS的范围

whitespace: no-wrap;

这可以防止非执行人员跨越界限。

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

答案 1 :(得分:1)

<强>更新

您最有可能在元素的左侧和右侧设置固定宽度填充。由于盒子模型的差异,IE和Firefox将以不同的方式解释。如果您无法重新编码页面以使用固定宽度和左/右边距,则需要在仅IE样式表中指定不同的固定宽度以补偿问题。

<强>教育

网络发展与教育有关。大部分教育都是教育您的客户期待和不期望的事情。

帮助向您的客户解释每个浏览器和操作系统组合处理字体的方式略有不同。一个引擎可能会使字母彼此略微靠近。

你可以投入大量的工作来做到这一点,但是如果你的最终用户完全放大了字体,花在确保一个带连字符的单词停留在同一行上的所有时间和金钱都会消失。

技术思想:两种浏览器似乎都已尽可能地渲染文本,我认为reset.css根本不会帮助您。

答案 2 :(得分:0)

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

编辑:刚看到你对克莱图斯回答的评论。那么:你用什么CSS来布置文本?

答案 3 :(得分:0)

这与边距,填充,字体,重置或任何CSS无关。这是关于浏览器如何解释连字符。 IE显然决定它可以打破连字符的界限,而Firefox则将其视为一个单词。

就像McPherrinM所说,你可以使用不间断的标签:<nobr>non-executive</nobr>。或者你可以简单地删除连字符。

或者您可以向您的客户解释所有浏览器和系统如何以不同方式呈现文本,并且您无法在所有情况下防止这种情况发生。无论如何,分成两行的单词有什么问题?

答案 4 :(得分:0)

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