html - 在 FireFox(所有浏览器)中滑出左侧导航/图像位置的正确 css？

Question

在 firefox 中，slidein_btn 在加载时开始得太靠右了。只有在打开和关闭幻灯片菜单后，图像(在 Firefox 中)才能正确地移动到 div 的左侧。

我做错了什么？

<img id="imgSlideOut" src="images/slidein_btn.png" style="position: absolute; float: left; top: 50%; margin-left: -20px;"/>
<img id="imgSlideIn" src="images/slideout_btn.png" style="position: absolute; float: left; top: 50%; margin-left: 160px; display: none;"/>

<div id="slideMenu" style="display: none; float: left; border: 1px solid #929497; min-height: 600px; width: 160px;">
    slide out menu here
</div>

HTML/jQuery

<script type="text/javascript">
    $("#imgSlideOut").click(function () {
        $("#slideMenu").show();
        $("#imgSlideOut").hide();
        $("#imgSlideIn").show();
    });
    $("#imgSlideIn").click(function () {
        $("#slideMenu").hide();
        $("#imgSlideIn").hide();
        $("#imgSlideOut").show();
    });
</script>

Answer 1

您的布局无法正常工作，因为您混合了 float 定位和绝对定位，并且您的 div 也没有绝对定位。删除其中一些样式实际上将使其在 Firefox 和其他浏览器中工作。

$("#imgSlideOut").click(function () {
        $("#slideMenu").show();
        $("#imgSlideOut").hide();
        $("#imgSlideIn").show();
    });
    $("#imgSlideIn").click(function () {
        $("#slideMenu").hide();
        $("#imgSlideIn").hide();
        $("#imgSlideOut").show();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgSlideOut" src="http://placehold.it/15" style="position: absolute; top: 50%; margin-left: -15px;"/>
<img id="imgSlideIn" src="http://placehold.it/15" style="position: absolute; top: 50%; margin-left: 160px; display: none;"/>

<div id="slideMenu" style="display: none; border: 1px solid #929497; min-height: 600px; width: 160px;">
    slide out menu here
</div>