There is a calculator that is well displayed in modern browsers. But in ie8 it does not work correctly! For some reason they disappeared: before and: after the brackets of .brackets. The display of absolutely positioned letters in the tables has flown, and in general it does not want to use width: 100%; text-align:center width: 100%; text-align:center . Apparently position relative does not want to be applied. How can this be fixed?

  .matrix_b { tbody{ &:before{ content: 'B'; position: absolute; font-size: 20px; bottom: -50px; width: 100%; text-align: center; } } }
  • I vote for the closure of this issue as not relevant topic, because there is no code. Even the link has no code, only 404. - Qwertiy ♦
  • @Qwertiy link corrected. I do not think that will be a good sense of this code. it is much easier and clearer to go in ie and press f12. - Drop
  • one
    @Drop, in ie in compatibility mode with 8 everything is shown normally - Grundy
  • @Grundy is odd in clean 8. He never wants to align before and after. Well and does not display brackets around tables. yadi.sk/i/wkx5DLPMrouzU - Drop

1 answer 1

In general, very poorly in ie8 is the support for before and after tables. Made this structure and everything became beautifully displayed. Written in less

 .matrix_b_wrapper { margin-top: 50px; } .b_name{ position: absolute; bottom: 0; width: 100%; font-size: 20px; bottom: -50px; text-align: center; } .matrix_b_cover { // margin-top: 50px; position: relative; } .str_inp{ width: 38px; height: 38px; input{ width: 38px; height: 38px; padding-left: 6px; margin: 5px; border: 1px solid #d9d9d9; border-top: 1px solid #b2b2b2; &:focus{ border:2px solid #5199db; } } } .brackets{ position: relative; display: inline-block; &:before{ content: ''; position: absolute; top: -6px; bottom: -6px; right: -7px; border-right: 2px solid #222; width: 10px; border-top: 2px solid #222; border-bottom: 2px solid #222; } &:after{ content: ''; position: absolute; top: -6px; bottom: -6px; left: -7px; width: 10px; border-top: 2px solid #222; border-bottom: 2px solid #222; border-left: 2px solid #222; } } 
 <div class="matrix_b_wrapper"> <div class="matrix_b_cover"> <div class="brackets"> <span class="b_name">B</span> <table class="matrix_b " id="matrix_b"> <tr> <td class="str_inp"> <input type="text" placeholder="b1,1"> </td> <td class="str_inp"> <input type="text" placeholder="b1,2"> </td> <td class="str_inp"> <input type="text" placeholder="b1,3"> </td> </tr> <tr> <td class="str_inp"> <input type="text" placeholder="b2,1"> </td> <td class="str_inp"> <input type="text" placeholder="b2,2"> </td> <td class="str_inp"> <input type="text" placeholder="b2,3"> </td> </tr> </table> </div> </div> </div>