Html webkit（safari/chrome）图像定位问题

我对此页面上的图像定位有问题：

以下是基本的HTML：

<div id="container">
<div class="gridContainer">
<div id="nav">
<ul>
<li><a href="index.html"><img src="./images/title.png"></a></li>
<li><a href="about.html">about</a></li>
</ul>
<hr>
</div>
<div id="maintext" class="tiles">
<div class="image"><a href="works/time.html"><img src="images/thumbnails/time.jpg"><h2>time</h2></a></div>
<div class="image"><a href="works/shame.html"><img src="images/thumbnails/shame.jpg"><h2>shame</h2></a></div>
</div>

我们的计划是在一个规则的网格中显示图像，但不知何故，这并不总是适用于Safari和Chrome。一个例子：

所以这似乎是一个基于webkit的问题。我尝试了一些似乎对解决类似问题有帮助的方法，但到目前为止没有任何效果

另外：Chrome不允许在某些智能手机上滚动。这种行为在我看来是随机的

有人有过类似浏览器的经验吗

---

编辑：有趣的事实：如果问题出现后在Safari中更改了浏览器的大小，则图像会排成一行。这毫无意义。

“寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题说明的问题对其他读者没有用处。请参阅：“在Safari 8中工作得非常好，顺便说一句编辑：无需调整窗口大小。“有人有过类似浏览器的经验吗？”~是的。。。它通常是无效的HTML=>您的

。我从来没有听说过重复使用meta

关键字

标签；每个字一次。奇怪的它应该包含“由逗号分隔的字符串，与页面内容相关的单词”。请参阅：更改了元标记，谢谢提醒。我的MacBookPro上的safari 8仍然显示出同样的行为。

#nav {  
    position: absolute;
    width: inherit;
    height: auto;
    z-index: 100;
}

#subnav {opacity: 0.7;}

#maintext { 
    position: fixed;
    top: 180px;
    height: 70%;
    overflow: scroll;
    margin: 0px auto 10px auto;
    width: inherit;
    z-index: -100;  
}

#maintext img {
    padding: 10px;
    width: inherit;
    max-width: 600px;
}

.tiles {
    text-align: center;
}

#maintext.tiles img:hover {
    opacity:0.4; 
    outline: none;
}

.image { 
   position: relative; 
   width: 200px;
   height: 200px;
   display: inline;
   vertical-align: top;
}