html - 四个 Div 彼此在 Safari 中未正确显示

Question

这是 CodePen: http://codepen.io/anon/pen/xLDpj

它在 Chrome、FF、IE11 上工作正常，但在 Safari 上测试时，它没有。

有什么想法吗？

这是 HTML:

<div class="header" style="display:flex; -webkit-flex: 1; -ms-flex: 1; flex: 1; background-color:#004973; color:#fff;">
  <div class="logo" style="min-width:225px; overflow:hidden; height:54px; padding:15px; float:left; background-color:#060">
    <img src="images/logo.png" width="225" height="47" style="max-width:none;">
  </div>
  <div class="search" style="width:100%; float:none; height:54px; padding:15px; background-color:#900;">
    <input name="" type="text" class="searchfield" value="Search Drug or Health Plan" style="height:30px; width:98%; padding:10px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border box;">
  </div>
  <div class="account" style="float:none; min-width:350px; height:54px; padding:15px; background-color:#00F;">
    Action Links here...
  </div>
  <div class="notify" style="min-width:70px; float:none; padding:15px;">
    <div class="notifynum">5</div>
    Notifications </div>
  <div style="clear: both;"></div>
</div>

Answer 1

答案是像素实际长度和其他 css 属性在每个浏览器中的工作方式不同。只需为 safari 浏览器加载不同的 css，否则在标题部分使用 JavaScript 为其他浏览器默认加载。并在每个 css 文件中为 div 做不同的 css 格式化。代码如下:

<script type="text/javascript">
var browser=navigator.userAgent;
if (browser.lastIndexOf("Safari")>=5)
{
var callbackFunc = function(){
//alert("WELCOME to Safari"); 
};

var head = document.getElementsByTagName( "head" )[0];
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");

fileref.setAttribute("href", "style_Safari.css");
fileref.onload = callbackFunc();
head.insertBefore( fileref, head.firstChild );
}

else
{
var callbackFunc = function(){
//alert("WELCOME others"); 
};
var head = document.getElementsByTagName( "head" )[0];
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "style.css");
fileref.onload = callbackFunc();
head.insertBefore( fileref, head.firstChild );

}