commit 16b79a2a4223bef8acdb82c6daf09fba3a55542d
parent 3173a6e53eb1da6ad1eab581a95b4e215195afc6
Author: Emily Eisenberg <emily@khanacademy.org>
Date: Tue, 22 Apr 2014 21:01:29 -0400
Fix the struts in IE9
Summary:
For some reason, `vertical-align: top` doesn't work in IE9, or at least doesn't
work the same as in any other browser (I'm too lazy to figure out what the
correct behavior really should be). Giving a literal value for `vertical-align`
works the same in all browsers, so use that instead.
Test Plan:
- Replace line 13 of static/index.html with
<br>m<span id="math"></span>m
- See that the test page now looks good in Chrome, Firefox, and IE9
- See that huxley tests haven't changed
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D8384
Diffstat:
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/buildTree.js b/buildTree.js
@@ -525,6 +525,10 @@ var buildTree = function(tree) {
topStrut.style.height = span.height + "em";
bottomStrut.style.height = (span.height + span.depth) + "em";
+ // We'd like to use `vertical-align: top` but in IE 9 this lowers the
+ // baseline of the box to the bottom of this strut (instead staying in the
+ // normal place) so we use an absolute value for vertical-align instead
+ bottomStrut.style.verticalAlign = -span.depth + "em";
var katexNode = makeSpan(["katex"], [
makeSpan(["katex-inner"], [topStrut, bottomStrut, span])
diff --git a/static/katex.less b/static/katex.less
@@ -23,10 +23,6 @@ big parens
.strut {
display: inline-block;
-
- &.bottom {
- vertical-align: top;
- }
}
.mathit {
