Что отличает мой код в Safari?

У меня есть некоторые странные вещи, происходящие в моем коде. Когда я запускаю его в хроме, это выглядит так, как будто это должно быть так:

Когда я запускаю его в Safari, кнопка настроек меняет положение.

Что отличает мой код в Safari?

Я уверен, что мне не хватает какого-то префикса, и я был бы рад, если бы кто-нибудь мог указать на это :)

Вот мой код:

/* NOT ACTUALLY NEEDED */
body {
  background-color: rgb(10, 10, 10);
  font-family: Lato;
}

/* ACTUAL STYLES */
:root {
  --border-radius: 5px;
  --text-color: rgb(207, 207, 207);
  --background-color: rgb(97, 97, 97);
  --background-hover-color: rgb(131, 131, 131);
  --font-size: 10pt;
}


#sectionTitle {
  background-color: rgb(78, 78, 78);
  border-top-left-radius: var(--border-radius);  
  border-top-right-radius: var(--border-radius);
  display: flex;
  height: auto;
  justify-content: space-between;
  padding: 10px 5px;
  position: relative;
}
#sectionTitle > div {
  display: inline-block;
  font-size: 11pt;
}

#timeSpan {
  color: var(--text-color);
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}

#controls {
  text-align: right;
  width: auto;
  margin-right: 10px;
}

#controls > div {
  display: inline-block;
}

#sectionBody {
  background-color: rgb(78, 78, 78);
  border-bottom-left-radius:  var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  height: 200px;
}


.wrapperOrContainer {
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  height: 30px;
  overflow: hidden;
}

.control_buttonOrInput {
  background-color: transparent;
  border: none;
  color: var(--text-color);
  font-size: 10pt;
  height: 100%;
  margin: 0;
  outline: none;
  padding: 0 10px;
  text-align: center;
  transition: background-color .3s;
}
.control_buttonOrInput:hover {
  background-color: var(--background-hover-color);
}

#dateSelect_container > input { 
  width: 70px;
  padding: 0 3px;
}

#settings_button_wrapper { width: 30px; }
#settings_button_wrapper > button {
  height: 100%;
  position: relative;
  width: 100%;
}
#settings_button_wrapper > button > img {
  bottom: 0;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8">
    <title>Document</title>
    <link rel = "stylesheet" href = "./index.css">
    <link href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet">
  </head>
  <body>
    <div id = "section">
      <div id = "sectionTitle">
        <div id = "timeSpan">KW 3 - Jan 2019</div>
        <div id = "controls">
          <div id = "timeSpanSelect_wrapper" class = "wrapperOrContainer">
            <button class = "control_buttonOrInput">Woche</button>
          </div>
          <div id = "today_button_wrapper" class = "wrapperOrContainer">
            <button class = "control_buttonOrInput">Heute</button>
          </div>
          <div id = "dateSelect_container" class = "wrapperOrContainer">
            <button class = "control_buttonOrInput">◀</button><!--
            --><input type = "text" value = "21.01.2019" class = "control_buttonOrInput"><!--
            --><button class = "control_buttonOrInput">▶</button>
          </div>
          <div id = "settings_button_wrapper" class = "wrapperOrContainer">
            <button class = "control_buttonOrInput"><img src = "./settings.png" alt = ""></button>
          </div>
        </div>
      </div>
      <div id = "sectionBody"></div>
    </div>
  </body>
</html>

Одна вещь, которую я вижу, это то, что вы устанавливаете цвет фона с помощью rgba, но на самом деле вам не хватает альфа-канала background-color: rgba(10, 10, 10).

— 22.01.2019 12:03

Э-э-э... правильно... должно быть, это произошло с инструментом цвета из VS Code.. извините, мой плохой. @VilleKoo исправил это. BG-Color теперь работает, спасибо, сэр :)

— 22.01.2019 12:04

Попробуйте добавить vertical-align: top в #controls > div и посмотрите, работает ли это для сафари.

— 22.01.2019 12:18

@VilleKoo Да, это так! : D Вы можете опубликовать ответ, чтобы я мог его принять. (почему существует эта дифференциация?)

— 22.01.2019 12:22

html css safari

22.01.2019 11:50

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку элементы div внутри элемента управления отображаются как inline-block, вы можете использовать vertical-alignимущество для их позиционирования в Safari.

#controls > div {
    display: inline-block;
    vertical-align: top;
}

22.01.2019 12:30

Другие вопросы по теме

Кнопки масштабирования изображения - не знаю как

HTML/CSS: размещение DIV после фиксированного DIV

Как заставить nth-child работать с вложенными тегами?

Настройка шрифта в веб-чате бота v4

В Firefox 49.0.1 требуется старый FireBug

Как выбрать метку для отмеченного флажка с помощью CSS?

Изменить направление мат-слайд-тумблер

JQuery нажмите, чтобы изменить цвет, но что-то пошло не так, измените семейство шрифтов

Заполнить атрибуты флажка и метки из массива в jQuery

Что отличает мой код в Safari?

Ответы 1

Другие вопросы по теме

Похожие вопросы