我正在设计一个网站。我的显示器分辨率为1280 x 1024，我通常使用Firefox进行开发。这就是它的外观和应该看起来的样子。这个是正确的。
但是，在同一台显示器上的Chrome中查看时会有轻微的变化。注意右下角。
当在具有不同屏幕分辨率的另一台显示器中查看时，情况会变得更糟。这是我的工作屏幕，分辨率为1366 x 768。
在火狐上
在Chrome上
如您所见，布局非常糟糕。下面是代码。
HTML
<img id="yellowRing" src="images/about_rings/yellow_ring.png" />
<img id="magentaRing" src="images/about_rings/magenta_ring.png" />
<img id="blueRing" src="images/about_rings/blue_ring.png" />
<div id="aboutCaption">
<p>Our Team</p>
</div>
<div id="team">
<div class="member"><a data-member="one" href="#"><img src="images/team/one_thumbnail.png" /></a></div>
<div class="member"><a data-member="two" href="#"><img src="images/team/two_thumbnail.png" /></a></div>
<div class="member"><a data-member="three" href="#"><img src="images/team/three_thumbnail.png" /></a></div>
<div class="member"><a data-member="four" href="#"><img src="images/team/four_thumbnail.png" /></a></div>
</div>
CSS
#yellowRing {
position:absolute;
left:1200px;
bottom:-1300px;
z-index:2;
}
#magentaRing {
position:absolute;
left:1600px;
bottom:-1100px;
z-index:3;
}
#blueRing {
position:absolute;
left:2160px;
top:500px;
z-index:4;
}
#aboutCaption {
position:absolute;
left:2430px;
top:-50px;
z-index:4;
line-height:2.2em;
}
#aboutCaption p {
font-weight:lighter;
text-align:right;
color:#FFF;
font-size:55px;
}
#team {
position:absolute;
left:2135px;
top:90px;
width:432px;
height:110px;
z-index:4;
}
.member {
position:relative;
height:95px;
width:95px;
margin:8px 8px 8px 0px;
z-index:5;
display:inline-block;
}
.member:nth-child(1) {
margin-left:8px;
}
.member img {
height:95px;
width:95px;
}
本网站仅水平滚动。我的问题是，为什么会这样？尽管屏幕尺寸或分辨率如何，我应该怎么做才能使布局保持一致？还是我必须进行响应式设计并在每个基准测试中包含多个 CSS 文件？
谢谢你。