0

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

场景： 假设我有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);
});
4

1 回答 1

0

用相对定位定位你的容器 div，然后用绝对定位定位你的箭头

于 2012-05-29T09:13:07.560 回答