Made a tiled menu for the site. Some users in IE (even in the 9th) tile is displayed crookedly (in other browsers the problem does not arise). Help me fix it, please.

-

#lnkm { display: block; height: 100px !important; width: 100%; margin: 10px 0px 15px 0px; border: 0px solid #000; background: #ffffff; } #lnkm:hover { display: block; height: 100px !important; width: 100%; background: #dddddd !important; background-color: #dddddd !important; } .lnkm_l { display: block; border: 0px; font-family: tahoma; text-decoration: none !important; color: #000000 !important; font-size: 14px; text-align: left; height: 100%; } .lnkm_i { float: left; width: 100px; height: 100px; background: 000000; border: 0px; margin-right: 20px; margin-top: 0px; } .lnkm_t { display: block; width: 100%; height: 100px; padding: 25px; } .lnkm_ok { display: block; width: 100%; font-size: 14px; color: #BDBDBD; } .lnkm_ok:before { content: ""; background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0Mi41MzMgNDQyLjUzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQyLjUzMyA0NDIuNTMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+); background-size:cover; margin-right: 7px; margin-top: 2px; width:10px; height:10px; display:inline-block; } .lnkm_not { display: block; width: 100%; font-size: 14px; } .lnkm_not:before { content: ""; background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQwMS45OTkgNDAxLjk5OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAxLjk5OSA0MDEuOTk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+); background-size:cover; margin-right: 7px; margin-top: 2px; width:10px; height:10px; display:inline-block; } .lnkm_not:after { content: "Материал может содержать неактуальную информацию (планируется обновление)"; }

code

  • jsfiddle.net/ujukxLs9/1 - this code correctly displays in IE9 - soledar10
  • Someone yes, someone - no. I would like to know how to make it appear correctly in earlier versions of IE. - Infvjqwqasw HunIhppb
  • connects via conditional comments - <! - [if lte IE 8]> <link href = "css / ie8.css" rel = "stylesheet" type = "text / css" /> <! [endif] -> and prescribe separately styles - soledar10
  • @ soledar10, thanks. And what to prescribe in this style so that the menu does not go away? - Infvjqwqasw HunIhppb

1 answer 1

Also, if in the head of the document, you do not have this, then add:

 <meta http-equiv="X-UA-Compatible" content="IE=edge">