1

День добрый, есть "скрипочка", во всех браузерах кроме "сафари" отображается правильно, в "сафари" добавляется поддинг не понятно откуда, в результате чего, html код отображается неправильно! Как можно решить данную проблему?!

alt text

6
  • для ul.shedule уберите display:table. для таблицы сафари берет внешние размеры, а не внутренние, реально ширина блока 231px, а сафари пытается впихнуть в 219px. 3 июл 2013 в 10:54
  • такая разметка таблицами делается, а не ul li
    – mountpoint
    3 июл 2013 в 10:55
  • такая разметка таблицами делается, а не ul li Легких путей не ищу!)))
    – Cone
    3 июл 2013 в 12:00
  • Не знаю откуда инфа про Safari, но десктоп на последней версии отображает норм – monosnap.com/file/hGcyuuwfhZW3lJVD8bjmL1mJmjSUc2.png
    – korytoff
    18 янв 2017 в 0:17
  • И на мобильном кстати то же корректное отображение
    – korytoff
    18 янв 2017 в 0:20

3 ответа 3

1

Добавьте вашим элементам принудительно box-sizing: content-box

0

Врапперу поставьте свойство white-space: nowrap;

0

float плохое свойство, на мой взгляд. с ним больше мук и страданий, чем пользы display:flex очень хорошо его заменяет.

* {
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.