Question

我们有一个在Safari 7.0.0以外的所有浏览器中都能看起来效果很好的着陆页。我们添加了一个id =“counter”的div，设置为“display：flex;”并且该样式正在除Safari 7.0.0（在Mac上）之外的每个浏览器中正确应用。在Safari 7.0.0中，用户代理样式表覆盖了CSS样式，“div”正在应用“display：block;”。我们已经尝试了解决这个问题的所有方法，例如确保我们使用正确的doctype，在问题的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;
}

Answer 1

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

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

1 个答案: