Fix for grid inside table in IE 10/11#504
Merged
redonkulus merged 2 commits intopure-css:masterfrom Dec 5, 2016
Merged
Conversation
|
Thank you for submitting this pull request, however I do not see a valid CLA on file for you. Before we can merge this request please visit https://yahoocla.herokuapp.com/ and agree to the terms. Thanks! 😄 |
Closed
Closed
Contributor
|
@sgryphon is it a common use case to have grids inside a table? Not against the PR if it's something that is done often. |
|
CLA is valid! |
8 tasks
Contributor
|
Changes look good, thanks! |
Contributor
|
@sgryphon released in 0.6.1 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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).