Fix for grid inside table in IE 10/11 #504
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In IE 10 / 11, a grid inside a table does not display (wrap) correctly.
I added an example to the manual test. Load this in IE 10 / 11 (and make the browser small enough so that wrapping is required). IE 10 / 11 doesn't wrap correctly (it works fine outside a table).
The fix uses media query hack to only target IE 10 / 11, and set back to display: block (if inside a table) and rely on the font hack.
I tested in conjunction with pull request #351 to add display: flex for browsers that support it. Note that IE 11 does support display: flex, but has the same issue when inside a table, so also needs the override.
I also tested MS Edge (Spartan), and it renders correctly in the first place; the beta I am using also ignored the -ms media queries and so continued to use flexbox. Interestingly the beta ignored all -ms prefixes but used -webkit prefixes (i.e. with #351 it uses flexbox because of -webkit, not because of -ms).