I have developed a website with Chrome initially (easiest to design for) but now am getting to IE support model.
That being said, I started with IE11 and made the necessary changes for the quirky differences between IE & Chrome. But now I am stepping down the IE versions. I was able to get 90% of the webpages to display correctly with CSS for IE10. But now most of the CSS elements that I have for these two browsers, are for the most part irrelevant for IE9.
I would like to keep from needing to have multiple browser specific style sheets, if possible.
First problems is converting IE10+ implementation of the flexbox model of CSS.
Current Implementation for the flexbox container:
div#navContainer{
display: flex; //Current browsers (IE11, Chrome, etc)
display: -ms-flexbox; //IE10 implementation
}
div#TeamsSection {
text-align: center;
}
div.NavSection {
margin: 0px 7px;
padding: 4px 0px 0px 0px;
}
div#teams {
margin: 0px;
select {
margin: 0px;
}
}
HTML:
<div id="navContainer" class="float-left">
<div id="LogoSection" class="NavSection">
<div id="Logo">
<img src="Images/Logo.png" />
</div>
</div>
<div id="TeamsSection" class="NavSection">
<label>Select a Team:</label><br />
<div id="teams"></div>
</div>
<div id="UserSection" class="NavSection hidden">
<label>Select a User:</label><br />
<div id="requestor"></div>
</div>
</div>
I know IE9 does not implement Flexbox, so please don't insult the research I have already done. I need an equivalent implementation that will allow me to change the HTML as little as possible.
The two browsers you should still keep in mind for cross-browser compatibility are: Internet Explorer 10, which implemented the display: flexbox version of the specification with the -ms- prefix.
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents.
As you see, the gap works perfectly for both CSS grid and flex - on the browsers that support them. However, for the non-supporting browsers like old versions of Chrome and Safari, the result will look like the figure below.
Use modernizr to detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox
, no-flexbox
, and flexbox-legacy
to the html element, so in your styles you can use:
.container {
display: flex;
}
.no-flexbox .container {
display: table-cell;
}
I highly recommend reading through Zoe Gillenwater's (@zomigi) presentations on the subject, particularly Leveling Up With Flexbox (Smart Web Conference - September 2014)
display: inline-block;
display: table-cell;
Also, in her presentation CSS3 Layout, there are a few good sideby side previews of layouts with and without flexbox:
Some of takeaways for me:
I like the above answer but you don't have to use modernizr. You could simply use table layout for ie9 and flexbox for others.
.container {
display: table-cell; // ie9
display: flex; // others
}
One year later, this solution, using JavaScript to adjust the layout in older browsers, seems interesting => https://github.com/10up/flexibility
Almost 2000 stars on Github but the last commit was 3 months ago, I don't know if it still actively maintained.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With