时间戳

首页 > 解决方案 > 我的 CSS 定位在 Code Pen 和 Chrome 之间是不同的

css - 我的 CSS 定位在 Code Pen 和 Chrome 之间是不同的

问题描述

我有一个正在为虚拟宠物编写的小程序。我的 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;
  }

请参阅随附的屏幕截图以查看差异。

标签： css

解决方案

我在 chrome、firefox 和 safari（在 Mac 上）上查看了你的 codepen，它们看起来都很好，但如果你想确保你的图标不会相互碰撞，你可以使用：position: absolute

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

推荐阅读