Merge pull request #216 from rschamp/bugfix/GH-128

Fix GH-128: Use table layout in IE 9 for navigation and homepage
This commit is contained in:
Andrew Sliwinski 2015-11-06 10:14:22 -05:00
commit 35a3e4c192
2 changed files with 40 additions and 2 deletions

View file

@ -16,6 +16,11 @@
/* NOTE: Height should match offset settings in main.scss file */
height: 50px;
.ie9 & {
display: table;
table-layout: fixed;
}
.inner > ul {
display: flex;
margin: 0;
@ -27,6 +32,10 @@
flex-direction: row;
justify-content: flex-start;
.ie9 & {
display: table-row;
}
> li {
display: inline-block;
@ -34,6 +43,13 @@
float: left;
height: 100%;
align-self: flex-start;
.ie9 & {
display: table-cell;
float: none;
height: 50px;
vertical-align: bottom;
}
}
.logo {
@ -83,6 +99,10 @@
color: $type-white;
flex-grow: 3;
.ie9 & {
width: 100%;
}
form {
margin: 0;
}
@ -140,6 +160,10 @@
margin-left: auto;
align-self: flex-end;
.ie9 & {
float: none;
}
a:hover {
background-color: $active-gray;
}
@ -202,10 +226,13 @@
.account-nav {
.userInfo {
padding-top: 14px;
padding-bottom: 3px;
max-width: 260px;
}
> a {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
font-size: .8125rem;
font-weight: normal;

View file

@ -5,13 +5,24 @@
flex-wrap: nowrap;
justify-content: space-between;
.ie9 & {
display: table;
margin: 0 -20px 20px -20px;
min-width: 100%;
border-spacing: 20px 0;
}
.box {
display: inline-block;
width: calc(60% - 20px);
.ie9 & {
display: table-cell;
vertical-align: top;
}
}
.news {
display: inline-block;
width: 40%;
}
}