我遇到以下问题:每个浏览器都显示一个固定位置的div(在Mac上使用Chrome,Firefox,Opera测试)但在Safari中没有。
我做过一些研究,但无法弄清楚问题的根源。
jQuery(function() {
jQuery("#bewerber-tab").click(function() {
jQuery("#bewerber-form").toggle("slide");
return false;
});
jQuery("#bewerber-link").click(function() {
jQuery("#bewerber-form").toggle("slide");
});
jQuery(document).click(function() {
jQuery("#bewerber-form").hide("slide");
});
});

#bewerber {
position: fixed;
left: 0;
top: 20%;
height: auto;
margin-left: -3px;
margin-bottom: -3px;
}
#bewerber-tab {
float: right;
color: #fff;
font-size: 20px;
cursor: pointer;
text-align: center;
width: 150px;
height: 50px;
background-color: #000000;
margin-left: -50px;
padding-top: 10px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#bewerber-form {
float: left;
width: 300px;
height: 150px;
padding: 15px;
background: #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
border-right: 1px solid white;
color: white;
text-align: center;
margin-top: -50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bewerber">
<div id="bewerber-form" style='display:none;'>
...
</div>
<div id="bewerber-tab">Bewerberbogen</div>
</div>
&#13;
除了Safari浏览器之外,为什么固定位置的div工作无处不在?