代码之家 › 专栏 › 技术社区 › Elias

什么使我的代码在Safari中看起来不同?

safari css html

Elias · 技术社区 · 7 年前

我的代码里有一些奇怪的事情。当我在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>

1 回复 | 直到 7 年前

VilleKoo 7 年前

因为控件DIV中的DIV显示为 inline-block 你可以使用 vertical-align property 把它们放在狩猎场。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前