html - CSS 代码异常，关于浏览器/分辨率的不同位置

Question

几个月以来，我一直在一个网站上使用相同的 CSS 代码。而且它工作完美，无论浏览器和屏幕分辨率如何，都能保持图像和文本的位置。

我现在刚刚将相同的相同代码移到另一个站点，看起来它给 CSS 带来了问题，因为浏览器和屏幕资源都在不同的位置移动 img 和文本。

能否请您报告我可能在代码中输入的错误？谢谢。

.up { display: block; position: relative; margin: auto; }

.left { display: inline-block; position:absolute; top: 75%; left: 0; }

.right { display: inline-block; position:absolute; top: 75%; left:71.35%; }

.down { display: inline-block; position:absolute; top: 2223%; left: 0; }

.middle { display: inline-block; position:absolute; top: 830%; left: 1.5%; }

.logo { display: inline-block; position:absolute; top: 30%; left: 21.5%; }

.folder { display: inline-block; position:absolute; top: 120%; left: 3%; }

.title { display: block; font: 1.3rem/1.0 Verdana; position: absolute; top: 340%; left: 23.6%; }

.text { display: block; font: 1.05rem/1.2 Arial; color: white; position: absolute; top: 1010%; left: 2.3%; }

.moretext { display: block; font: 0.95rem/1.1 Tahoma; position: absolute; top: 1280%; left: 2.75%; }

.signup { display: block; font: 1.2rem/0.7 Arial Black; color: red; position: absolute; top: 720%; left: 32%; }

.object1 { display: inline-block; position:absolute; top: 305px; left: 32px; }

.object2 { display: inline-block; position:absolute; top: 305px; left: 171px; }

.object3 { display: inline-block; position:absolute; top: 305px; left: 309px; }

.object4 { display: inline-block; position:absolute; top: 305px; left: 448px; }

Answer 1

通过添加这个东西解决:

大纲{宽度:600px； margin : 0 auto ；填充:0；

包装器{ float :左；背景:#fff；宽度:600px； margin :0!重要； margin :-15px 0 0 0；/* IE hack */padding: 0;

内容{ float :左；宽度:600px；高度:439px；