如何为Chrome / Firefox和IE 7和8制作RaphaelJS垂直对齐文本?

时间:2011-04-15 15:41:40

标签: svg raphael vml

我认为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)

1 个答案:

答案 0 :(得分:2)

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

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