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文件中执行不同的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 );

}

Answer 2

发现我必须为Safari使用正确的FLEX属性，即： display: -webkit-box;

发现此代码段对所有浏览器都非常有用：

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

我刚刚将上述page-wrap课程分配给了.header div，但它确实有效！

四个Div在Safari中没有正确显示

2 个答案: