正确 css 在 FireFox（所有浏览器）中滑出左侧导航/图像位置？

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。使用 left 或 right 代替：

#imgSlideOut {
    position: absolute;
    left: -20px;
    top: 50%;
}
#imgSlideIn {
    position: absolute;
    left: 160px;
    top: 50%;
    display: none;
}

Answer 2

您的布局工作不正常，因为您混合了浮动定位和绝对定位，并且您的 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>

正确 css 在 FireFox（所有浏览器）中滑出左侧导航/图像位置？

correct css for slide out left nav / image position in FireFox (all browsers)?

html

css

firefox