我一直在制作website，与Google Chrome完美配合。对于网站上的中心元素，我使用了flex属性，当浏览器缩放时，它最大程度地居中。 但是当我在Safari上尝试我的网站时，我得到了不同的结果，首先看它是居中的，但是在缩放之后，我得到了一些不必要的结果：
overflow:hidden上的body样式在Google Chrome上完美运行。这是网站的body样式：
html,
body {
margin: 0;
background-color: #232622;
height: 1500px;
width: 100%;
}
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
overflow-x: hidden;
}
Safari版本 9.1.2 。
兼容性问题的HTML：
<input type="checkbox" id="show" value="open">
<label id="show_code" for="show">Show Code <b class="caret">▼</b></label>
<div class="code">
<code><ul class="main" style="list-style:hidden">
<li><a class="logo" href="/" style="text-decoration:none"></a></li>
<li><a class="nav" href="/browse" style="text-decoration:none">Browse</a></li>
<li><a class="nav" href="/support" style="text-decoration:none">Support</a></li>
<li><a class="nav" href="/add_funds" style="text-decoration:none">Add Funds</a></li>
<li><a class="login" href="/login" style="text-decoration:none"></a></li>
</ul>
<ul class="down-bar" style="list-style:hidden">
<div class="mainouter">
<div class="mainmover">
<div class="dropdown">
<input type="checkbox" value="drop" id="drop-1" class="dropper">
<li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Knives <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu">
<a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a>
<a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a>
<a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a>
<a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a>
<a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a>
<a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a>
<a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a>
<a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a>
<a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a>
<a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a>
</div>
</div>
<div class="dropdown-1">
<input type="checkbox" value="drop" id="drop-2" class="dropper2">
<li><label class="down-nav-1" id="down-nav-2" for="drop-2" style="text-decoration:none">Pistols <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu-2">
<a href=?search=Glock-18&type=weapon><label class="glock-18" style="width:30px;height:23px;position:absolute;top:9.5px;left:4px;cursor:pointer;"></label>Glock-18</a>
<a href=?search=USP-S&type=weapon><label class="usp-s" style="width:30px;height:23px;position:absolute;top:59px;left:4px;cursor:pointer;"></label>USP-S</a>
<a href=?search=P2000&type=weapon><label class="p2k" style="width:30px;height:23px;position:absolute;top:106px;left:4px;cursor:pointer;"></label>P2000</a>
<a href=?search=Five-Seven&type=weapon><label class="five-seven" style="width:30px;height:23px;position:absolute;top:157px;left:4px;cursor:pointer;"></label>Five-SeveN</a>
<a href=?search=Desert%20Eagle&type=weapon><label class="desert-eagle" style="width:30px;height:23px;position:absolute;top:207px;left:4px;cursor:pointer;"></label>Desert Eagle</a>
<a href=?search=Tec-9&type=weapon><label class="tec9" style="width:30px;height:23px;position:absolute;top:258px;left:4px;cursor:pointer;"></label>Tec-9</a>
<a href=?search=CZ75-Auto&type=weapon><label class="cz75" style="width:30px;height:23px;position:absolute;top:307px;left:4px;cursor:pointer;"></label>CZ75-Auto</a>
<a href=?search=P250&type=weapon><label class="p250" style="width:30px;height:23px;position:absolute;top:357.5px;left:4px;cursor:pointer;"></label>P250</a>
<a href=?search=Dual%20Berettas&type=weapon><label class="dual_berettas" style="width:30px;height:30px;position:absolute;top:407px;left:4px;cursor:pointer;"></label>Dual Berettas</a>
<a href=?search=R8%20Revolver&type=weapon><label class="r8_revolver" style="width:30px;height:23px;position:absolute;top:461.5px;left:4px;cursor:pointer;"></label>R8 Revolver</a>
</div>
</div>
<div class="dropdown-2">
<input type="checkbox" value="drop" id="drop-3" class="dropper3">
<li><label id="down-nav-3" class="down-nav-2" for="drop-3" style="text-decoration:none">SMGs <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu-3">
<a href=?search=P90&type=weapon><label class="p90" style="width:30px;height:23px;position:absolute;top:10px;left:8px;cursor:pointer;"></label>P90</a>
<a href=?search=MAC-10&type=weapon><label class="mac10" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>MAC-10</a>
<a href=?search=MP7&type=weapon><label class="mp7" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>MP7</a>
<a href=?search=MP9&type=weapon><label class="mp9" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>MP9</a>
<a href=?search=PP-Bizon&type=weapon><label class="pp-bizon" style="width:30px;height:23px;position:absolute;top:210px;left:8px;cursor:pointer;"></label>PP-Bizon</a>
<a href=?search=UMP-45&type=weapon><label class="ump45" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>UMP-45</a>
</div>
</div>
<div class="dropdown-3">
<input type="checkbox" value="drop" id="drop-4" class="dropper4">
<li><label id="down-nav-4" class="down-nav-3" for="drop-4" style="text-decoration:none">Rifles <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu-4">
<a href=?search=AK-47&type=weapon><label class="ak47" style="width:30px;height:23px;position:absolute;top:9.5px;left:8px;cursor:pointer;"></label>AK-47</a>
<a href=?search=Galil%20Ar&type=weapon><label class="galil_ar" style="width:30px;height:23px;position:absolute;top:61px;left:8px;cursor:pointer;"></label>Galil AR</a>
<a href=?search=SG%20553&type=weapon><label class="sg553" style="width:30px;height:23px;position:absolute;top:111px;left:8px;cursor:pointer;"></label>SG 553</a>
<a href=?search=M4A4&type=weapon><label class="m4a4" style="width:30px;height:23px;position:absolute;top:161px;left:8px;cursor:pointer;"></label>M4A4</a>
<a href=?search=M4A1-S&type=weapon><label class="m4a1s" style="width:30px;height:23px;position:absolute;top:211.5px;left:8px;cursor:pointer;"></label>M4A1-S</a>
<a href=?search=AUG&type=weapon><label class="aug" style="width:30px;height:23px;position:absolute;top:261.5px;left:8px;cursor:pointer;"></label>AUG</a>
<a href=?search=Famas&type=weapon><label class="famas" style="width:30px;height:23px;position:absolute;top:311.5px;left:8px;cursor:pointer;"></label>Famas</a>
</div>
</div>
<div class="dropdown-4">
<input type="checkbox" value="drop" id="drop-5" class="dropper5">
<li><label id="down-nav-5" class="down-nav-4" for="drop-5" style="text-decoration:none">Snipers <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu-5">
<a href=?search=AWP&type=weapon><label class="awp" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>AWP</a>
<a href=?search=SSG%2008&type=weapon><label class="ssg08" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>SSG 08</a>
<a href=?search=SCAR-20&type=weapon><label class="scar20" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>SCAR-20</a>
<a href=?search=G3SG1&type=weapon><label class="g3sg1" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>G3SG1</a>
</div>
</div>
<div class="dropdown-5">
<input type="checkbox" value="drop" id="drop-6" class="dropper6">
<li><label id="down-nav-6" for="drop-6" class="down-nav-5" style="text-decoration:none">Heavy <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu-6">
<a href=?search=Nova&type=weapon><label class="nova" style="width:30px;height:23px;position:absolute;top:9.5px;left:13.5px;cursor:pointer;"></label>Nova</a>
<a href=?search=MAG-7&type=weapon><label class="mag-7" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>MAG-7</a>
<a href=?search=XM1014&type=weapon><label class="xm1014" style="width:30px;height:23px;position:absolute;top:111px;left:13.5px;cursor:pointer;"></label>XM1014</a>
<a href=?search=Sawed-Off&type=weapon><label class="sawed_off" style="width:30px;height:23px;position:absolute;top:161px;left:13.5px;cursor:pointer;"></label>Sawed-Off</a>
<a href=?search=Negev&type=weapon><label class="negev" style="width:30px;height:23px;position:absolute;top:211.5px;left:13.5px;cursor:pointer;"></label>Negev</a>
<a href=?search=M249&type=weapon><label class="m249" style="width:30px;height:23px;position:absolute;top:261.5px;left:13.5px;cursor:pointer;"></label>M249</a>
</div>
<div class="dropdown-6">
<input type="checkbox" value="drop" id="drop-8" class="dropper8">
<li><label id="down-nav-8" for="drop-8" class="down-nav-7" style="text-decoration:none">Other <b class="caret"> ▼</b></label></li>
<div class="dropdown-menu-7">
<a href=?search=Keys&type=weapon><label class="keys" style="width:30px;height:30px;position:absolute;top:6px;left:13.5px;cursor:pointer;"></label>Keys</a>
<a href=?search=Cases&type=weapon><label class="cases" style="width:30px;height:23px;position:absolute;top:61px;left:13.5px;cursor:pointer;"></label>Cases</a>
<a href=?search=Passes&type=weapon><label class="passes" style="width:30px;height:23px;position:absolute;top:105.5px;left:13.5px;cursor:pointer;"></label>Passes</a>
<a href=?search=Capsules&type=weapon><label class="capsules" style="width:30px;height:23px;position:absolute;top:156.5px;left:13.5px;cursor:pointer;"></label>Capsules</a>
<a href=?search=Pins&type=weapon><label class="pins" style="width:30px;height:30px;position:absolute;top:207px;left:13.5px;cursor:pointer;"></label>Pins</a>
<a href=?search=Packages&type=weapon><label class="packages" style="width:30px;height:14px;position:absolute;top:264.5px;left:13.5px;cursor:pointer;"></label>Packages</a>
<a href=?search=Stickers&type=weapon><label class="stickers" style="width:30px;height:30px;position:absolute;top:308px;left:13.5px;cursor:pointer;"></label>Stickers</a>
<a href=?search=Music%20Kits&type=weapon><label class="music_kits" style="width:30px;height:34px;position:absolute;top:356.5px;left:13.5px;cursor:pointer;"></label>Music Kits</a>
</div>
</div>
</div>
</div>
</div>
<div class="searchbox">
<div class="mover">
<form action="/" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='1F0UM2vB8b0FSJIUzw3r1hdOSjNFjclWX4tqvQJUbfqIcqvMiHUOKDkJgVv9AZiZ' />
<input type="text" name="searchfield" class="search" placeholder="Search Item">
<div class="mover1">
<div class="statbox">
<select name="sbox1" class="selectbox" id="stattrak">
<option value="any"></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<label class="stattext" for="stattrak">StatTrak™ <b class="caret_left">▶</b></label>
</div>
</div>
<div class="mover2">
<div class="conbox">
<select name="sbox2" class="selectbox" id="condition">
<opgroup>
<option value="any"></option>
<option value="vanilla">Vanilla</option>
<option value="fn">Factory New</option>
<option value="mw">Minimal Wear</option>
<option value="ft">Field-Tested</option>
<option value="ww">Well-Worn</option>
<option value="bs">Battle-Scarred</option>
</opgroup>
</select>
<label class="context" for="condition">Condition</label>
<b class="caret_center">▲</b>
</div>
</div>
<div class="mover3">
<div class="rarbox">
<select name="sbox3" class="selectbox" id="rarity">
<optgroup>
<option value="any"></option>
<option value="base">Base Grade</option>
<option value="high">High Grade</option>
<option value="exotic">Exotic</option>
<option value="remarkable">Remarkable</option>
<option value="extraordinary">Extraordinary</option>
<option value="consumer">Consumer Grade</option>
<option value="industrial">Industrial Grade</option >
<option value="mil-spec">Mil-Spec</option>
<option value="restricted">Restricted</option>
<option value="classified">Classified</option>
<option value="covert">Covert</option>
<option value="melee">★ Melee</option>
<option value="contraband">Contraband</option>
</optgroup>
</select>
<label class="rartext" for="rarity"><b class="caret_left">◀</b> Rarity</label>
</div>
</div>
<div class="mover4">
<div class="souvbox">
<select name="sbox4" class="selectbox" id="souvenir">
<option value="any"></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<label class="souvtext" for="souvenir">Souvenir <b class="caret_left">▶</b></label>
</div>
</div>
<div class="mover5">
<div class="stickbox">
<select name="sbox5" class="selectbox" id="stickers">
<option value="any"></option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
<label class="sticktext" for="stickers"><b class="caret_left">◀</b> Stickers</label>
</div>
</div>
<div class="mover6">
<div class="price_min">
<input name="pbox1" type="number" class="pmin" min="0.01" step="0.01">
<label class="mintext">Price (Min) <b class="caret_left">▶</b></label>
</div>
</div>
<div class="mover7">
<div class="price_max">
<input name="pbox2" type="number" class="pmax" min=0.01 step="0.01">
<label class="maxtext"><b class="caret_left">◀</b> Price (Max)</label>
</div>
</div>
<div class="mover8">
<div class="sortbox">
<select name="sbox6" class="selectbox" id="sort_by">
<option value="featured">Featured</option>
<option value="newest_to_oldest">Date: Newest → Oldest</option>
<option value="oldest_to_newest">Date: Oldest → Newest</option>
<option value="highest_to_lowest">Price: Highest → Lowest</option>
<option value="lowest_to_highest">Price: Lowest → Highest</option>
<option value="w_lowest_to_highest">Wear: Lowest → Highest</option>
<option value="w_highest_to_lowest">Wear: Highest → Lowest</option>
</select>
<label class="sorttext">Sort By</label>
<b class="caret_center">▲</b>
</div>
<div class="mover9">
<input type="submit" name="submit_search" class="submitsearch" value="Search">
</div>
</div>
</form>
</div>
</div>
</ul>
我还尝试了body样式的autoprefixer github display: flex并没有解决我的问题。
我怎样才能使display: -webkit-flex;与Safari或它的Webkit布局引擎兼容？我也不知道为什么-webkit-box不适用于Safari 9.1.2，display: flex;也不适用。还有其他什么可以使用吗？如果我在9.1.2上不需要供应商前缀，那么为什么普通[0]不正常？
基本上，主要问题是什么？我找不到与我的具体问题相关的任何内容（宽度为100％，我使用供应商前缀作为flex）。