Fix for grid inside table in IE 10/11 (#504)

* Fix for grid inside table in IE 10/11
This commit is contained in:
Sly Gryphon 2016-12-06 00:00:31 +10:00 committed by Seth Bertalotto
parent 2ca1b57430
commit 6c2aae1b89
2 changed files with 23 additions and 0 deletions

View File

@ -44,6 +44,13 @@
align-content: flex-start;
}
/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
table .pure-g {
display: block;
}
}
/* Opera as of 12 on Windows needs word-spacing.
The ".opera-only" selector is used to prevent actual prefocus styling
and is not required in markup.

View File

@ -446,5 +446,21 @@
</div>
</div>
<h2>Grid Inside Table</h2>
<table>
<tr>
<td>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="content">1/2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra eros et mattis venenatis.</div>
</div>
<div class="pure-u-1-2">
<div class="content">1/2 Nam neque sapien, lacinia non lectus non, accumsan suscipit ipsum.</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>