Question

我一直在网页上处理订单和交付，我遇到了一个我不确定如何解决的问题。该页面目前使用jQuery可折叠列表＆amp; Flex框显示在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＆lt; 9）：

#content-list {
    display: flex;

如果您希望其他浏览器的行为与Safari类似，只需将其设置为block即可。（Fiddle）

如果您希望Safari的行为与其他浏览器一样，您需要添加前缀版本，就像其他地方一样：（Fiddle）

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

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

1 个答案: