浏览器缩小网页（Safari浏览器除外）

Question

我一直在网页上处理订单和交付，我遇到了一个问题，我不知道如何解决。该页面目前使用jQuery可折叠列表& flex box显示，这些显示在Safari中很好地呈现，但在其他任何浏览器中都没有。身体缩小到似乎是移动视图，并且无论边距或尺寸有什么变化，它都保持移动大小。

我目前使用jquery.mobile-1.4.5.min.js来构造列表，我已经不得不对CSS做一些修改来吸引页面的布局，但是我找不到任何会影响页面大小的东西。我的问题是什么可能造成这种情况？它在jQuery方面，还是会出现CSS问题？

这是我一直在使用构建一切模板

HTML

<ul id="content-list"> 
      <form name="form1" form method="POST" action="/cgi-bin/formmail"> 
      <ul style="margin:auto;"> 
       <ul class="background"> 
       <div data-role="main" class="ui-content"> 
       <div data-role="collapsible"> 
       <h4>Items</h4> 
       <ul class="flex-container"> 
        <li class="flex-item">product name</li> 
        <li class="flex-item">producer name</li> 
        <li class="flex-item">price</li> 
        <li class="flex-item"><input type="text" placeholder="amt. here" maxlength="15"></li> 
       </ul> 
       </div> 
       <div data-role="collapsible"> 
       <h4>More Items</h4> 
       <div data-role="collapsible"> 
       <h4>Even more items</h4> 
       <ul class="flex-container2"> 
        <li class="flex-item2">longer product name</li> 
        <li class="flex-item2">longer producer name</li> 
        <li class="flex-item2">price<br>price<br>price</li> 
        <li class="flex-item2"> 
        <div class="input"> 
         <input type="text" placeholder="amt. here" maxlength="15"> 
         <input type="text" placeholder="amt. here" maxlength="15"> 
         <input type="text" placeholder="amt. here"maxlength="15"> 
        </div> 
        </li> 
       </ul> 
       </div> 
       </div> 

CSS

@mixin flexbox() { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

@mixin flex($values) { 
    -webkit-box-flex: $values; 
    -moz-box-flex: $values; 
    -webkit-flex: $values; 
    -ms-flex: $values; 
    flex: $values; 
} 

@mixin order($val) { 
    -webkit-box-ordinal-group: $val; 
    -moz-box-ordinal-group: $val;  
    -ms-flex-order: $val;  
    -webkit-order: $val; 
    order: $val; 
} 

.flex-container { 
    padding: 0; 
    margin: 2% 0 4% 0; 
    list-style: none; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    justify-content: space-between; 
} 
ul { 
    display: flex; 
} 
ul:after { 
    border-bottom: 1px solid black; 
} 
.flex-item { 
    background: white; 
    padding: 0; 
    width: 100px; 
    height: 80px; 
    margin-top: 10px; 
    margin: auto; 
    line-height: 25px; 
    color: black; 
    font-weight: normal; 
    font-size: 1em; 
    text-align: center; 
} 
.input{ 
    width: 75px; 
    vertical-align: top; 
} 
.background{ 
    border: none; 
    margin: auto; 
    width:80%; 
    min-width: 80%; 
    padding-right: 1cm; 
    background-color:#009966; 
} 
#content-list { 
    display: flex; 
    width: 100%; 
    min-width: 100%; 
    padding-bottom: 2cm; 
} 


.flex-container2 { 
    padding: 0; 
    margin: 2% 0 4% 0; 
    list-style: none; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    justify-content: space-between; 
} 
.flex-item2 { 
    background: white; 
    padding: 0; 
    width: 130px; 
    height: 120px; 
    margin-top: 10px; 
    margin: auto; 
    line-height: 45px; 
    color: black; 
    font-weight: normal; 
    font-size: 1em; 
    text-align: center; 
    } 

另外，这里是模板瓦特/我的资源使用： http://jsfiddle.net/TLittler/9ndzm3cc/

Answer 1

我不确定是否磨坏她想要Safari浏览器表现得像其他浏览器，或者反过来，但这里是什么引起的差别（至少对于Safari浏览器< 9）：

#content-list { 
    display: flex; 

如果你想其他浏览器的行为类似于Safari浏览器，只需设置它到block。 （Fiddle）

如果你想Safari浏览器表现得像其他浏览器，你需要添加前缀的版本，像其他地方一样：（Fiddle）

display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex;