1
我们有一个着陆页，在除Safari 7.0.0以外的所有浏览器中看起来效果很好。我们添加了一个id =“counter”的div，设置为“display：flex;”并且该风格正在Safari 7.0.0（Mac上）以外的所有浏览器中正确应用。以某种方式在Safari 7.0.0中，该CSS样式正被正在应用“display：block;”的“div”的User Agent Stylesheet覆盖。我们尝试了所有我们可以想到的方法来解决这个问题，例如确保我们使用的是正确的文档类型，向所讨论的CSS样式添加“！important”，甚至添加内联样式，但无济于事！这个问题只发生在我的雇主的电脑上，任何人可以给我们的帮助将不胜感激！为什么用户代理样式表在Safari 7.0.0中覆盖了我的CSS样式表
#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;
}