Safari 给出奇怪的 CSS 行为

发布于 2024-11-29 19:34:33 字数 1206 浏览 1 评论 0原文

我使用 JQuery 的可排序（如网格）来对 div 进行排序，第一个 div 的宽度大约是其余 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;
}

非常感谢您的帮助。

原文

I'm using JQuery's sortable (as grid) to be able to sort divs, the first of which is approximately three times as wide as the rest. I want to display them in just two rows, which Chrome and Firefox have been able to do just fine, but Safari is displaying them sort of like this:

BIGDIV
DIV DIV
DIV DIV
DIV DIV

By the way I'm doing this in rails which will explain my code below:

<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>

I removed a little to make it more readable. Also, here's my 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;
}

Thanks so much for any help.

分享到QQ

分享到微博