html - 为什么用户代理样式表会覆盖我在 Safari 7.0.0 中的 CSS 样式表

标签 html css safari user-agent

我们有一个登陆页面,在除 Safari 7.0.0 之外的所有浏览器中看起来和工作都很好。我们添加了一个 id="counter"的 div,它被设置为 "display: flex;"并且该样式在除 Safari 7.0.0(在 Mac 上)之外的所有浏览器中都得到了正确应用。在 Safari 7.0.0 中,CSS 样式被应用“display:block;”的“div”的用户代理样式表覆盖。我们已经尝试了所有我们能想到的方法来解决这个问题,例如确保我们使用了正确的文档类型、向有问题的 CSS 样式添加“!important”甚至添加内联样式,但都无济于事!这个问题只发生在我雇主的电脑上,任何人都可以给我们任何帮助,我们将不胜感激!

#HTML
<div id="counter" class="center-block text-center counter-wrapper">
          <div class="card">
            <div class="time">
              <span id="days"></span>
            </div>
            <p>Days</p>
          </div>
          <div class="card">
            <div class="time">
              <span id="hours"></span>
            </div>
            <p>Hours</p>
          </div>
          <div class="card">
            <div class="time">
              <span id="minutes"></span>
            </div>
            <p>
              <span class="hidden-xxs-down">Minutes</span>
              <span class="hidden-xxs-up">Min</span>
            </p>
          </div>
          <div class="card">
            <div class="time">
              <span id="seconds"></span>
            </div>
            <p>
              <span class="hidden-xxs-down">Seconds</span>
              <span class="hidden-xxs-up">Secs</span>
            </p>
          </div>
          <div class="card">
            <div class="time">
              <span id="milliseconds"></span>
            </div>
            <p>
              <span class="hidden-xxs-down">Millisec</span>
              <span class="hidden-xxs-up">Msec</span>
            </p>
          </div>
        </div> <!-- End Counter -->


#CSS
div#counter .counter-wrapper{
 display: flex !important;
 justify-content: space-between;
 flex-direction: row;
 flex-wrap: wrap;
 width: 85%;
 margin: 0 auto;
 -webkit-display: flex;
 -webkit-flex-direction: row;
}

最佳答案

在旧版本的 Safari 7.0.0 中,任何使用 Flex 的 CSS 规则都需要以“-webkit-”开头,请参阅此处的文档:http://www.w3schools.com/css/css3_flexbox.asp 此外,对于有问题计算机的人来说,最好将他们的 Safari 版本最终更新到最新版本。 Safari 7.0.0 于 2013 年问世......!

关于html - 为什么用户代理样式表会覆盖我在 Safari 7.0.0 中的 CSS 样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41006964/

相关文章:

javascript - 我的子菜单在 WordPress 中悬停时未显示

WebSocket 由于页面重新加载时出现暂停错误而关闭

javascript - 通过忽略 div 标签 javascript 的内部元素来选择文本

具有超链接特征的 HTML 按钮

javascript - 如何根据 js 的命名空间和有趣名称调用 django View 函数?

html - min-height 固定高度

html - HTML 表格中的一列没有水平边框线

html - 使用带有 float 列表的 CSS 打印标签

html - Safari 溢出/可见性和溢出/显示错误(元素仍然可见)

javascript - Angular2 显示数据示例不起作用