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 that you have read and understand our privacy policy and code of conduct.

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