查看下面的图片，您会看到一幅图像的一部分被切断。
如果您查看我的HTML / CSS，您会在调整页面大小时发现一些奇怪的内容。它一次切断一个图像，始终与窗口顶部的距离相同。我已经缩小了问题的一部分，这似乎位于CSS的最后一部分（margin-bottom:-35.35%）。更改该值将改变“set1”图像相对于“mag1”图像被截断的方式。我正在使用Safari，一切都在Dreamweaver Live View中应用。它只在浏览器中显示此错误。
我不知道造成这个问题的原因。请帮忙！
http://i58.tinypic.com/24ayb2c.png
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="tester.css" rel="stylesheet" type="text/css">
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="pic1"><img id="set1" src="http://i61.tinypic.com/nv64aq.png"><a href="magazine cover.jpg"><img id="mag1" src="http://i61.tinypic.com/1tndhc.png"></a></div>
<div id="pic2"><img id="set2" src="http://i60.tinypic.com/2n87k3t.png"><a href="magazine cover.jpg"><img id="mag2" src="http://i57.tinypic.com/zixi8j.png"></a></div>
<div id="pic3"><img id="set3" src="http://i59.tinypic.com/30204fb.png"><a href="magazine cover.jpg"><img id="mag3" src="http://i61.tinypic.com/25f0lyv.png"></a></div>
</body>
</html>
CSS
#pic1 {
margin-top: 8%;
}
#pic1, #pic2, #pic3 {
float: right;
width: 68%;
margin-left: 6%;
margin-right: 6%;
margin-bottom:-50px;
position:relative;
}
#pic1 {
z-index:2;
}
#pic2 {
z-index:1;
}
#pic3 {
margin-bottom:0;
}
#mag1, #set1, #mag2, #set2, #mag3, #set3 {
width: 100%;
}
#set1,#set2,#set3 {
margin-bottom:-35.35%;
}