如何为 Chrome / Firefox vs IE 7 和 8 制作 RaphaelJS 垂直对齐文本？答案

【问题标题】：How to make RaphaelJS vertical align text for both Chrome / Firefox vs IE 7 and 8?如何为 Chrome / Firefox vs IE 7 和 8 制作 RaphaelJS 垂直对齐文本？
【发布时间】：2011-04-15 15:41:39
【问题描述】：

我认为 RaphaelJS 在 Chrome / Firefox 和 IE 7 和 8 中应该是一样的？

示例在

http://jsfiddle.net/8UPhS/1/

文本在 Chrome 和 Firefox 上垂直居中，但在 IE 7 和 8 上，文本的基线是居中的（所以它比 FF 高几个像素）...有没有办法让它们全部表现一样吗？

（对于 IE 7 和 8，最好不要使用浏览器检测并将文本调整为低几个像素，因为这不是一个干净的解决方案）

（在 IE 9 上，由于某种原因，图像根本没有显示，即使使用 Developer Tool 将 Compat 模式更改为 IE 7 或 8...但如果我在 IE 9 上使用链接的单独页面执行此操作raphael.js 在index.html 的同一网站上，然后我得到了最糟糕的情况：有时我得到一种行为，有时我得到另一种行为，随机......它几乎看起来像是一个竞争条件）

（对于IE 9，可以使用这个页面：

http://try-raphael-text.heroku.com
http://try-raphael-text.heroku.com/raphael20.html

第二个链接是在 GitHub 的 Raphael 2.0 分支上使用 Raphael 2.0

2.0 版本实际上可以在 IE 7 上进行垂直对齐，但在 IE 8 上，没有显示任何文字... 使用这个简单的案例，它在 IE 9 上运行良好......但在我们的真实页面上，它有时会导致 IE 9 崩溃）

【问题讨论】：

标签： svg raphael vml

【解决方案1】：

这是 Raphael 1.5.2 [1] 中的一个已知错误。我更喜欢功能检测而不是浏览器检测来解决这个错误？ Raphael 提供了一个名为 svg (true|false) 的属性。看看我的例子：http://jsbin.com/iwudu5/edit。

[1]https://github.com/DmitryBaranovskiy/raphael/issues/86

【讨论】：

所以你是说，如果是svg，那么什么都不做，但如果不是svg（那么它必须是VML），那么垂直添加3个像素？
是的，完全正确。 “3px”只是一个占位符，因为这段代码 sn-p 从未在 IE (VML) 上测试过。