クロスブラウザーの問題についてはあまり経験がありませんが、次の問題が発生しています。
Scenerio : 私が持っているとしdivましょう。2つのボタン (左-araow--右矢印) があり、いずれかのボタンで画像の位置を変更します(画像は右または左に移動しますが、外側にとどまります)width:800pxdivonclickdivdiv
問題 :画面の解像度を変更または縮小すると、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);
});