Code that is too long to display on a single line creates a massive vertical code block

Unfortunately the eighth incarnation of a certain browser from Redmond has issues with max-height in conjunction with overflow: auto – under certain circumstances, it causes the issue you see. Until recently we had disabled max-height on IE8 (because of a different issue that seems since fixed).

So we can either put that hack back in, causing giant walls of text again, or not do it, and cause Narwhal aquariums.

Or… why not try an even uglier hack!

After some testing, I found that giving the max-height to the element inside the <pre>, and not to the <pre> itself, actually works.

However, this means that a) we need a wrapper element inside the <pre>, and b) that wrapper needs to be display: block (and overflow: visible, but that's default). And we're certainly not rebuilding the HTML of every post ever made to work around an IE8 bug.

Fortunately, any Markdown-created codeblock (i.e. 4-space indent) does have that wrapper: Codeblocks are always <pre><code>. So we can do something at least for those blocks (which obviously are the vast majority).

Unfortunately, this may break when someone writes their own HTML like this:

<pre><code>Hello</code>world</pre> 

– but I'm making the assumption that no-one does that.

The best thing would be to apply this CSS hack only to <pre><code>...</code></pre>, but unfortunately IE8 doesn't support the pre > code:only-child-not-even-any-text-node-siblings selector, so the best we can do is :first-child.

This will be in the CSS after the next build:

.post-text pre > code:first-child { max-height: 600px\9; display:block\9; } .post-text pre { max-height: none\9; } 

This is ugly as hell, and it causes my contrived example above to break (it grows a newline), but I'm willing to give it a try, since it fixes a majority of these cases.

The weird \9 thingadongdongs are a browser hack to make these rules only count in IE8, so other browsers aren't impacted by this.

If it causes other issues again, I'm afraid we have to go back to the giant walls of text.