Does display block and display none not supported in IE8? - html

Question

I have used two images under a table row with id "bannerweb" for web/common and id "bannermobile" for mobile and tab compatibility.
<tr>
<td valign="top">
<img src="http://campaign.vmware.com/imgs/apac/templates/20596_APAC_ASEAN_Bootcamp/images/Architect_Bootcamp_masthead1.jpg" id="bannerweb" width="700" height="189">
<img src="http://images.connect.vmware.com/eloquaimages/clients/VMWare/{b28e5230-1543-4326-8ee8-a780172f2a75}_Architect_Bootcamp_masthead1_mobile.jpg" id="bannermobile" />
</td>
</tr>
and the style applied as such,
<style type="text/css">
For mobile compatibility,
<!--Mobile-->
#media only screen and (min-width: 0px) and (max-width: 361px) {
#bannerweb{
display:none;
visibility:hidden;
}
#bannermobile{
display:block;
width:235px;
}
}
For tablet view,
<!--Tablet-->
#media screen and (min-width: 362px) and (max-width: 561px) {
#bannerweb{
display:block;
width:500px;
height:150px;
}
#bannermobile{
display:none;
visibility:hidden;
}
}
And this style is applied commonly for all web pages.
<!--Common-->
#media screen and (min-width: 562px) and (max-width: 2000px) {
#bannerweb{
display:block;
}
#bannermobile{
display:none;
visibility:hidden;
}
}
</style>.
But in the above code is not reflected in IE 8 alone. display block and none doesny work in IE 8. Any soultions?

Answer 1

Are you using RespondJs?
IE8 doesn't support by default the media queries, that might be your problem