html - In ng-app application css media queries not working properly on ie9 and ie10 -
in angularjs app, css media query not working on ie9 , ie10. media query defined small screen effecting globally. works when resize browser or inspect element.
no issues in other browsers chrome , firefox. i've not tested in ie10+ browser. works in ie8+ when remove angularjs. here media query:
@media (min-width: 0px) , (max-width: 767px) { .col-sidebar{ width:100%} .col-content{ width:100%} }
in large screen on ie10 browser, sidebar shows 100% width.
here global css large screen:
.col-sidebar{ width:30%} .col-content{ width:70%}
you used initial keyword which not supported in internet explore.
i removed initial keyword , replaced default value. jsfiddle
css
body { margin: 0; padding: 0; overflow: hidden; } #header { height: 116px; background-color: #333; } #sidebar, #content { position: absolute; top: 7.2em; bottom: 0; overflow: auto; } #sidebar { width: 392px; overflow-x: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.3); z-index: 999; overflow: hidden; background-color: red; } #map_canvas {background-color: green;} #content { overflow: hidden; left: 24em; right: 0; background-color: green; } #map_canvas { height: 100%; } @media screen , (max-width: 768px) { body { padding-bottom: 40px !important; } .box { width: 100%; } #sidebar { width: 100%; overflow-x: hidden; box-shadow: none; z-index: auto; } #sidebar, #content { bottom: auto; position: static; } #content { overflow: visible; left: auto; right: auto; height: 100%; } }
Comments
Post a Comment