屏幕分辨率更改CSS

我不是很跨瀏覽器的問題有經驗，但我有這個問題：屏幕分辨率更改CSS

之情況：讓說，我有width:800pxdiv，在div我有2個按鈕（左araow - 向右箭頭），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); 
});

來源

2012-05-29 user1409822

什麼？........... – RSM

請提供您的代碼在jsfiddle.net .. –

在這裏添加CSS和HTML代碼。 – Sajmon

位置的div容器與相對定位和再定位你的箭絕對定位

來源

2012-05-29 09:13:07

我修改了我的jquery，以像素爲單位給出左邊距，現在我用％完成了它，並且在谷歌瀏覽器和所有其他瀏覽器中工作，以及F *** INTERNET EXPLORER留下的問題:-( – user1409822

屏幕分辨率更改CSS

回答

相關問題