Good day, there is a “fiddle” , in all browsers except “safari” it is displayed correctly, in the “safari” a subling is added where it is not clear where, as a result, the html code is displayed incorrectly! How can you solve this problem?

alt text

  • for ul.shedule remove display:table . For a safari table, it takes external dimensions, not internal ones, the actual width of the block is 231px, and the safari tries to cram into 219px. - Yura Ivanov
  • this marking is done by tables, not ul li - mountpoint
  • this marking is done with tables, not ul li. I’m not looking for easy ways!))) - Cone
  • I do not know where the info about Safari comes from, but the desktop on the latest version displays the rules - monosnap.com/file/hGcyuuwfhZW3lJVD8bjmL1mJmjSUc2.png - korytoff
  • And on the mobile way the same correct display - korytoff

3 answers 3

Add your elements to a forced box-sizing: content-box

    Set the white-space: nowrap; property white-space: nowrap;

      float is a bad property in my opinion. with him more agony and suffering than good display: flex replaces it very well.

       * { padding:0; margin:0; outline:none; } body { background:silver; font-family:'Cuprum', sans-serif; font-size:62.5%; } /* shedule */ ul.shedule { padding:5px; background:#fff; font-size:120%; border:1px solid #eee; width:219px; color:white; zoom:1; } ul.shedule li { display: flex; margin-bottom:2px; } .shedule .day { text-transform:uppercase; border-right:2px solid #fff; width:122px; padding:10px; background:#a6ce2c; } .shedule .time { text-align:center; width:75px; padding:10px 0; background:#333; } 
       <ul class="shedule"> <li> <div class="day">Понедельник </div> <div class="time">7:00 - 23:00</div> </li> <li> <div class="day">Вторник</div> <div class="time">7:00 - 23:00</div> </li> <li> <div class="day">Среда</div> <div class="time">7:00 - 23:00</div> </li> <li> <div class="day">Четверг</div> <div class="time">7:00 - 23:00</div> </li> <li> <div class="day">Пятница</div> <div class="time">7:00 - 23:00</div> </li> <li> <div class="day">Суббота</div> <div class="time">7:30 - 23:00</div> </li> <li> <div class="day">Воскресенье</div> <div class="time">ВЫХОДНОЙ</div> </li> </ul>