Question

我在跨浏览器问题方面不是很有经验，但我遇到了这个问题：

Scenerio：让我说div为width:800px，div我有2个按钮（左 - 左 - 右 - 箭头），我在onclick更改图像位置的任何按钮上div（图片向右或向左移动，但保留在外部div）

问题：当我重新调整大小或降低屏幕分辨率时，我的CSS会发生变化;图像越过div，我的按钮位置也会发生变化。

任何想法或解决方案？感谢。

编辑：它在Firefox和Opera中运行良好，但在Google Chrome和IE中无效。

下面是html：

<div class="hand">
    <div id="handinside"></div> 
</div>
<div id="left" class="button"> left </div> 
<div class="flip"></div>
<div id="right" class="button">right</div>
</div>

下面是CSS

.gameNavigation {
    width: 220px;
    margin: 0px auto 0px;
}

.button {
    margin: 0 0 0 5px; 
    cursor: pointer; 
    width: 59px; 
    height: 29px; 
    float: left; 
    text-align: center; 
    background-color:red;
    color: white;
}


.hand {
    position:relative;
    background-color:transparent;
    left:0px;
    width:140px;
    height:210px;
}

以下是jquery

    $(".button").click(function() {
    var $button = $(this);
    var oldValue = $("#counter").val();
    if ($button.text() == "right"  )  {
        //move right if the value is no more than 4
        if(parseInt(oldValue) < 3){
            var newVal = parseInt(oldValue) + 1;
            $(".hand").animate({
                "left": "+=222px"
            }, "slow");
            $(".coin").animate({
                "left": "+=222px"
            }, "slow");
        //$(".block").stop();
        }
    }
    else {
        // move left and don't allow the value below zero
        var test = 'test'
        if (oldValue >= 1) {
            var newVal = parseInt(oldValue) - 1;
        }

        if(parseInt(newVal) >= -1){
            $(".hand").animate({
                "left": "-=222px",
                easing :'swing'
            }, "slow");
            $(".coin").animate({
                "left": "-=222px",
                easing : 'swing'
            }, "slow");
        }

    }
    $("#counter").val(newVal);
});

Answer 1

使用相对定位定位容器div，然后使用绝对定位

定位箭头

屏幕分辨率改变CSS

1 个答案: