如何使RaphaelJS在Chrome / Firefox和IE 7、8中实现垂直居中文本？

Question

我认为 RaphaelJS 应该在 Chrome / Firefox 和 IE 7 和 8 中保持一致？

示例网址为

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

文本在Chrome和Firefox上垂直居中，但在IE 7和8上，文本的基线居中（因此比FF高几个像素）...有没有办法让它们都表现得一样？（最好不要使用浏览器检测并将文本调整几个像素以适应IE 7和8，因为这不是一个很干净的解决方案）（在IE 9上，由于某种原因，即使使用开发人员工具将兼容模式更改为IE 7或8，图像也根本不显示...但如果我在同一网站上链接raphael.js的单独页面上使用IE 9，则会出现最糟糕的情况：有时我会得到一种行为，有时我会得到另一种行为，随机的...它几乎看起来像是竞争条件）（对于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崩溃)

- nonopolarity

Answer 1

这是Raphael 1.5.2中已知的一个bug [1]。我建议使用功能检测来解决这个问题，而不是使用浏览器检测。Raphael提供了一个名为svg（true|false）的属性。请看我的例子：http://jsbin.com/iwudu5/edit。

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

- basecode

---

所以你的意思是，如果是SVG，则不做任何操作，但如果不是SVG（那么它必须是VML），则在垂直方向上添加3个像素？ - nonopolarity

是的，"3px"只是一个占位符，因为这段代码片段从未在IE（VML）上进行过测试。 - basecode