Question

我的代码中发生了一些奇怪的事情。当我在chrome中运行它时，好像应该这样做，就是这样：

在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>

Answer 1

由于控件div中的div显示为inline-block，因此您可以使用vertical-align property将其放置在Safari中。

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

是什么让我的代码在Safari中看起来与众不同？

1 个答案: