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;
}