浏览器缩小网页(Safari浏览器除外)
我一直在网页上处理订单和交付,我遇到了一个问题,我不知道如何解决。该页面目前使用jQuery可折叠列表& flex box显示,这些显示在Safari中很好地呈现,但在其他任何浏览器中都没有。身体缩小到似乎是移动视图,并且无论边距或尺寸有什么变化,它都保持移动大小。浏览器缩小网页(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/
我不确定是否磨坏她想要Safari浏览器表现得像其他浏览器,或者反过来,但这里是什么引起的差别(至少对于Safari浏览器< 9):
#content-list {
display: flex;
如果你想其他浏览器的行为类似于Safari浏览器,只需设置它到block
。 (Fiddle)
如果你想Safari浏览器表现得像其他浏览器,你需要添加前缀的版本,像其他地方一样:(Fiddle)
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
我需要其他浏览器以safari的方式显示网页。我对不作出澄清表示歉意。我将'#content-list'设置为阻止以及'ul',并且它完美地显示了一切。谢谢。 –
向我们展示代码示例或任何有助于识别问题。现在你只是模糊地问,如果有人知道那边的那匹马,隐藏在幕后。 – somethinghere
对此抱歉。代码已添加。 –
一条建议,使用铬开发,超过60%的互联网使用铬,只有约4%使用Safari,8%使用IE,22%使用Firefox。 –