Jquery css设计改变了设备与设备之间的关系

我已经使用jquery动画功能开发了类似match的游戏。它完全符合我的预期。这是我的游戏。我的问题是，当我在我的系统中运行这个游戏时，它工作正常，如下图所示，

但当我在其他系统中运行时，其对齐方式会自动改变（用黑色表示），如下图所示

css我正在使用的

#main{ width: 800px; border: 1px solid #f00}

#first {

    float:left; /* add this */

    height: 350px;
     padding-left: 0px;
}
#second {
    text-align:left;
   float:right;
     height: 350px;
}

.dropzone {

margin: 5px;
padding: 10px!important;
border: 2px dashed #f0ad4e;
border-radius: 5px;
background-color: #eeeeee;
z-index: 50;
float: left;
text-align: center;

list-style:none;
}


 .item {

    margin: 5px;
    padding: 10px!important;
    border: 2px solid #5bc0de;
    border-radius: 5px;
    background-color: #eeeeee;
    z-index: 9999;
    float: left;
    text-align: center;
    list-style:none;
    }

    label, span { position: relative; }

jsp:

<div  id="main" align="center">
<div id="first" class="nav nav-justified">      
     <label id="Cat" class="dropzone">Cat</label><br><br><br>
     <label id="Snake" class="dropzone">Snake</label><br><br><br>
     <label id="Cow" class="dropzone">Cow</label><br><br><br>
     <label id="Afor" class="dropzone">A for</label><br><br><br>

     <label id="Cfor" class="dropzone">C for</label><br><br><br>

 </div>
    <div id="second">
        <label id="Cow" class="item"  name="Milk">Milk</label><br><br><br>        
         <label id="Cat" class="item"  name="Rat">Rat</label><br><br><br>  
          <label id="Snake" class="item"  name="Eagle">Eagle</label><br><br><br> 

               <label id="Cfor" class="item"  name="Cherry">Cherry</label><br><br><br> 
                   <label id="Afor" class="item"  name="Apple">Apple</label><br><br><br> 
 </div>
   </div>  

猫



蛇



奶牛
A用于



C代表



牛奶
老鼠



鹰
樱桃
苹果

---

如何解决这个问题？

它的问题在Firefox上。您的

AFor

div有问题

<label disabled="disabled" style="background-color: yellow; color: white; bottom: 57.6px; right: 351.6px;" id="Afor" class="item" name="Apple">Apple</label>

苹果公司 当我移除并再次添加

右侧

位置时，它将工作良好。因此，您可以通过jQuery更新您的CSS。

使用演示

$（函数（）{
var计数=0；
var-click=0；
var i=1；
$（'#textid'）.val（''）；
$（'#textid2'）.val（''）；
//$（'.item'）.prop（'disabled'，'disabled'）；
$（'successMessage'）.hide（）；
$（“#errorMessage”）.hide（）；
$（'.dropzone'）.attr（'Disabled'，false）；
$（'.item'）.attr（'Disabled'，false）；
$（'.dropzone'）。单击（函数（）{
变量x，y；
var Ans=$（this.attr（'id'）；
动画（{左：“250px”}，“慢”）；
//$（this.effect（“highlight”，{}）；
//$（this.blink（）；
T=$（“#”+Ans）.offset（）.top；
L=$（“#”+Ans）.offset（）.左；
//警报（'x:'+T+'\n'+'y:'+L）；
//var lname=$（this.attr（'name'）；
$（'#textid'）.val（Ans）；
var textval=$（'#textid2'）.val（）；
//警报（textval）；
//$（'#textid2'）.val（lname）；
如果（textval！=“”）{
//警报（Ans+'\n'+'#'+textval）；
$（'#'+textval）.animate（{left:“0px”}，“slow”）；
}
$（'#textid2'）.val（Ans）；
//警报（“#”+Ans）；
//$（'label[name='+lname+']'）。动画（{right:“200px”}，“slow”）；
//警报（Ans）；
});
$（'.item'）。单击（函数（）{
var Ques=$（this.attr（'id'）；
var lname=$（this.attr（'name'）；
$（this.animate（{右：'250px'}）；
var Ans=$（'#textid'）.val（）；
var text2=$（'#textid2'）.val（）；
如果（text2==“”）
{
$（this.animate（{右：“0px”}）；
}
//警报（lname）；
var T=$（“#”+Ans）.offset（）.top；
var L=$（“#”+Ans）.offset（）.left；
//警报（'x:'+T+'\n'+'y:'+L）；
//警报（“标签名称：”+lname）；
if（Ques==Ans）
{
//警报（“匹配”）；
M=$（this）.offset（）.top；
N=$（this）.offset（）.left；
M-=T；
N-=L+120；
//警报（M+“\n”+n）；
$（this.animate（{bottom:M+'px'}）；
$（this.animate（{right:N+'px'}）；
var isimagecheck=$（'#imageyestext'）.val（）；
//警报（isimagecheck）；
如果（i==1）{
$（“#”+Ans）.css（{'background-color'：'red'，'color'：'white'}）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'red'，'color'：'white'}）；
}
其他的
{
$（this.css（{'background-color'：'red'，'color'：'white'）；
}
}
else如果（i==2）{
$（“#”+Ans）.css（{'background-color'：'green'，'color'：'white'}）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'green'，'color'：'white'}）；
}
其他的
{
$（this.css（{'background-color'：'green'，'color'：'white'）；
}
}
else如果（i==3）{
$（“#”+Ans）.css（{'background-color'：'yellow'，'color'：'black'}）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'yellow'，'color'：'black'}）；
}
其他的
{
$（this.css（{'background-color'：'yellow'，'color'：'white'）；
}
}
else如果（i==4）{
$（“#”+Ans）.css（{'background-color'：'gray'，'color'：'white'}）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'gray'，'color'：'white'}）；
}
其他的
{
$（this.css（{'background-color'：'gray'，'color'：'white'）；
}
}
else如果（i==5）{
$（“#”+Ans）.css（{'background-color'：'pink'，'color'：'white'}）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'pink'，'color'：'white'}）；
}
其他的
{
$（this.css（{'background-color'：'pink'，'color'：'white'）；
}
}
else如果（i==6）{
$（“#”+Ans）.css（{'background-color'：'#339933'，'color'：'white'）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'339933'，'color'：'white'}）；
}
其他的
{
$（this.css（{'background-color'：'339933'，'color'：'white'）；
}
}
else如果（i==7）{
$（“#”+Ans）.css（{'background-color'：'pink'，'#666633'：'white'）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'#66666633'，'color'：'white'}）；
}
其他的
{
$（this.css（{'background-color'：'#666633'，'color'：'white'）；
}
}
else如果（i==8）{
$（“#”+Ans）.css（{'background-color'：'pink'，'#CC9900'：'white'）；
如果（isimagecheck==“否”）{
$（'input[name='+lname+']'）.css（{'background-color'：'CC9900'，'color'：'white'}）；
}
其他的
{
$（this.css（{'background-color'：'CC9900'，'color'：'white'）；
}
}
$（'input[name='+lname+']'）.prop（'disabled'，true）；
$（“#”+Ans）.attr（'disabled'，true）；
$（this.attr（'disabled'，true）；
$（'#textid2'）.val（''）；
$（'#textid'）.val（''）；
计数++；
i++；
}
其他的
{
$（“#”+Ans）。设置动画（{左：“0px”}）；
$（this.animate（{右：“0px”}）；
$（'#textid2'）.val（''）；
$（'#textid'）.val（''）；
点击++；
}
函数successMessagestyle（）
{
$（'successMessage'）。动画（{
左：'550px'，
顶部：'180px'，
宽度：“400px”，
高度：'110px'，
不透明度：1
} );
}
函数errorMessagestyle（）
{
$（'#errorMessage'）。动画（{
左：“815px”，
顶部：'180px'，
宽度：“350px”，
高度：'110px'，
不透明度：1
} );
}
如果（计数=5）
{
$（“#成功消息”）.show（）；
$（“#successbuttonid”）.blink（）；
$（“#成功