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>

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

2 个答案: