Skip to content

Instantly share code, notes, and snippets.

@heyitsolivia

heyitsolivia/ie_gotchas.md

Last active October 7, 2016 14:10
Show Gist options
  • Save heyitsolivia/47b4fd38f81a383365fa3f5c7c7f2bf3 to your computer and use it in GitHub Desktop.
Save heyitsolivia/47b4fd38f81a383365fa3f5c7c7f2bf3 to your computer and use it in GitHub Desktop.
Download ZIP
Internet Explorer is the Best
Raw
ie_gotchas.md

Things are collapsing with flexbox

Browsers: IE 10, 11

Bug: flex: 1

Fix: flex: 1 auto

Explanation: https://roland.codes/blog/ie-flex-collapse-bug/

Turns out this was a red herring. The actual bug is that IE 10-11 treats flex-basis as an absolute height when all flex items are flexible. And since the default value for flex-basis is 0px when using flex, the elements end up being 0px high. The solution is to explicitly set the flex-basis to auto (e.g flex: 1 1 auto) or use the separate properties (e.g: flex-grow: 1). If you need to use a flex-basis in this kind of layout, you should be able to use min-height or max-height to achieve the same result.

Event.target

Browsers: Older IE browsers

Fix: var target = event ? event.target : window.event.srcElement;

Explanation: https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement

Event.srcElement is a proprietary alias for the standard Event.target property. It is specific to old versions of Microsoft Internet Explorer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment