css - 位置 : relative displaying as if position: static

Question

我有以下 HTML(摘自较大的代码库)

<div class="diary-event ui-corner-all" title="[title]">
    <span id="delete"></span>
    <div class="diary-event-title ui-corner-all">[title]</div>
    <div class="diary-event-body ui-corner-all">
        <p class="hyphenate">[body]</p>
    </div>
</div>

(其中[title]和[body]是动态生成的字符串)

样式如下:

.ui-corner-all
{
    -moz-border-radius:4px 4px 4px 4px;
}
.diary-event
{
    display:block;
    height:100%;
    position:relative !important;
    vertical-align:top;
    width:100%;
    word-wrap:break-word;
}
table *
{
    margin:0;
    padding:0;
}

#diary-grid
{
    border-collapse:collapse;
}
body
{
    font-family:Arial;
}

现在在 Firefox、Chrome 和大多数其他浏览器中，这个 div 的相对定位意味着它会与页面的其余部分一起滚动，没有问题，但是由于某些原因在 IE 6 和 7 中它就像定位是静态的一样(IE 8 工作正常)。

CSS 文件的/any/中没有任何位置被称为静态，我想知道以前是否有人遇到过这个问题，如果遇到过，我该如何解决。

我发现问题出在 jQuery 将定位直接注入(inject)主 div 的“样式”部分:

start: function(event, ui)
{
    $(diary_event).attr('style','position: relative'); // <----
    diary_event = $(this);
    diary_event_parent = $(this).parent();
}

但是，如果我删除它，它会破坏在除 IE 之外的所有其他浏览器中准确地重新拖动已放置元素的能力。

换句话说，我找到了问题所在，但没有找到解决方法>_<

Answer 1

是因为ie6&7的一个bug。您只需添加 position:relative 到“body”元素(而不是您的“body”占位符)。 http://friendlybit.com/css/ie6-resize-bug/

希望对您有所帮助!