直列塊弄亂與相對定位

我有以下代碼：直列塊弄亂與相對定位

<HTML> 
<head> 
<style>div{border:dashed 1px silver}</style> 
</head> 
<BODY style="background: #fff;"> 

<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;"> 

<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;"> 
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV> 
<DIV style="float: left">First</DIV> 
<div style="clear: both;"></div></DIV> 

<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;"> 
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV> 
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV> 

</div> 

</BODY> 
</HTML>

的第二個div不位於32×位置，除非刪除了顯示：內聯塊屬性，該屬性我需要。有沒有解決的辦法？

編輯：它似乎工作，如果我刪除顯示：內聯塊，但然後滾動條將水平出現（因爲該div需要一些不可見的空間）。

來源

2010-01-17 Tower