开发者

How to make RaphaelJS vertical align text for both Chrome / Firefox vs IE 7 and 8?

I thought RaphaelJS is supposed to be the same when it is Chrome / Firefox and in IE 7 and 8?

The example at

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

The text is vertically centered on Chrome and Firefox, but on IE 7 and 8, the baseline of the text is centered instead (so it is several pixels higher than in FF)... Is there a way to make them all behave the same?

(preferably not to use browser detection and adjust the text a few pixels lower for IE 7 and 8, as it is not such a clean solution)

(on IE 9, for some reason the image i开发者_开发技巧s not showing at all, even if using Developer Tool to change Compat mode to IE 7 or 8... but if I do it on IE 9 using a separate page linking the raphael.js on the same website of index.html, then I get the worst situation of all: sometimes I get one behavior, sometimes I get the other behavior, at random... it almost looks like it is a race condition)

(for IE 9, this page can be used:

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

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

the second link is using Raphael 2.0 on GitHub's Raphael 2.0 branch

the 2.0 version actually works on IE 7 to vertical align, but on IE 8, no text is shown... it works well on IE 9 using this simple case... but on our real page, it is able to crash IE 9 sometimes)


It's a known bug in Raphael 1.5.2 [1]. I would prefer feature-detection over browser-detection to workaround this bug? Raphael provides a property called svg (true|false). Look at my example: http://jsbin.com/iwudu5/edit.

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜