位置：相对显示，就像位置：静态一样

发布于 2024-09-15 10:17:06 字数 1425 浏览 0 评论 0原文

我有以下 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 将定位直接注入到主 div 的“样式”部分：

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

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

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

原文

I have the following HTML (excerpt from larger code-base)

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

(Where [title] and [body] are dynamically generated strings)

And the Styling for this is as follows:

.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;
}

Now in Firefox, Chrome, and most other browsers, the relative positioning of this div means it scrolls with the rest of the page, no problems, however for some reason in IE 6 and 7 it acts as if the positioning is static (IE 8 works fine).

At no point in /any/ of the CSS files is the position referred to as static and I was wondering if anyone has come across this problem before, and if so, how I may fix it.

I have found that the problem is where jQuery injects the positioning directly into the 'style' section of the main div:

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

however if I remove this it breaks the ability to re-drag a dropped element accurately in all other browsers apart from IE.

In other words, I have found where the problem resides, but not how to fix it >_<

分享到QQ

分享到微博