Safari提供了奇怪的CSS行为

Question

我正在使用JQuery的可排序（作为网格）来对div进行排序，其中第一个大约是其余部分的三倍。我想在两行中显示它们，Chrome和Firefox已经能够做得很好，但Safari显示它们有点像这样：

BIGDIV
DIV DIV
DIV DIV
DIV DIV

顺便说一下，我在rails中这样做会解释下面的代码：

<ul id="sortable" style= "width: 1050px; height: 625px;" >
<li id="newspod"  style="width: 610px;">
    <div class="pod" style="width:598px;">
        <div id="header" style="width: 598px">NEWS</div>
    </div>
</li>
<% @pods.each do |podli| %>
<li class="ui-state-default">
    <div class="pod">
        <div id="header"><%= podli.name %></div>        
    </div>
</li>
</ul>

我删除了一点以使其更具可读性。另外，这是我的CSS：

#sortable { list-style-type: none; margin: 20px 10px 10px 10px; padding: 0;}
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 294px; font-size: 4em; text-align: center; }
.pod {
width:188px;
height:282px;
background-color:#FFFFFF;
/********** CSS 3 **********/
box-shadow:3px 3px 10px #000;
-webkit-box-shadow:3px 3px 10px #000;
-moz-box-shadow:3px 3px 10px #000;
}

非常感谢您的帮助。