Question

我有一个正在为虚拟宠物编写的小程序。我的CSS定位有些不对劲。在Code Pen（https://codepen.io/JammyPiece/full/dBZaMP）中，一切正常。

！[所有位置正确的屏幕截图] https://res.cloudinary.com/dytmcam8b/image/upload/v1562690535/blob_u4hiqo.jpg

但是在Chrome浏览器中，我的小物件错位的距离都一样。！[元素的屏幕快照不正确] https://res.cloudinary.com/dytmcam8b/image/upload/v1562690535/boboutofplace_vpw8fp.jpg

我不知道该怎么办-我将其托管在Code Pen中，但我需要知道为什么它不能在Chrome中运行。

我一直在阅读有关定位的信息。我对使用Code Pen的位置感到满意，但可以在Chrome浏览器中读取文件，心脏，星星和食物等小物件都不合适。有什么可以做的以使两者都就位？所有图像都相对放置。

#heart {
    height: 150px;
    width: 150px;
    transform: scale(0.5);
    top: -970px;
    left: 400px;
    position: relative;
    display: none;
    }
 #star {
    height: 150px;
    width: 150px;
   top: -970px;
   left: 350px;
    transform: scale(0.5);
    position: relative;
   display: none;
}


 #hungry {
    height: 80px;
    width: 80px;
    position: relative;
    left: 330px;
   top: -970px;
   display: none;
    }

#age {
  width: 250px;
  position: relative;
  top: 180px;
  left: 100px;
  display: none;
}

#medicine {
  width: 100px;
  position: relative;
  top: -870px;
  left: 150px;
  display: none;
   }

#toys {
  width: 100px;
  position: relative;
  top:-1000px;
  left:-50px;
  display: none;
  }

.action {
  position: relative;
  height: 400px;
  width: 800px;
  margin: 0 auto;
}

#food {
  width: 100px;
  position: relative;
  left: 440px;
  top: -1000px;
  display: none;
   }

#drink{
  width: 100px;
  position: relative;
  left: 240px;
  top: -900px;
  display: none;
  }

请参阅随附的屏幕截图，以了解区别。

Answer 1

我在chrome，firefox和safari（在Mac上）上查看了您的Codepen，在所有这些图标上看起来都很好，但是如果您要确保您的图标不会相互冲突，可以使用：{ {1}}

（没有足够的声誉来发表评论）

我的CSS位置在Code Pen和Chrome之间不同

1 个答案: