Question

我的头撞了一会儿......

<div id="pager" style="top: 5px; position: relative; " class="pager" >
    <form>
        <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first"/>
        <img src="http://tablesorter.com/addons/pager/icons/prev.png" alt="prev" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="http://tablesorter.com/addons/pager/icons/next.png" alt="next" class="next"/>
        <img src="http://tablesorter.com/addons/pager/icons/last.png" alt="last" class="last"/>
        <select class="pagesize">
            <option selected="selected" value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
        </select>
    </form>
</div>

当我实际加载页面并快速查看源代码时，这就是我所看到的：

<div id="pager" style="top: 494px; position: absolute; " class="pager">

表本身并没有什么特别之处，尽管它确实属于<div id="main">

<table id="runResults" class="tablesorter">

CSS：

 table 
{
  border: solid 1px #000000;
  border-collapse: collapse;
}

table td 
{
  padding: 5px;   
  border: solid 1px #000000;
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #000000;   
}

Pager没有在我的CSS中定义，也没有任何div元素。

这只是我网站上一个表的分页插件，而且相当烦人，因为很明显条目的数量并不总是10的整数倍...这意味着寻呼机的定位离开了页面时只有1或2个溢出条目。

如何使寻呼机div相对于表实际定位？

编辑：每当我选择“pagesize”中的各种选项时，表格会正确调整大小，并且div会根据需要进行调整...如果我导航到最后一页（有2个溢出条目）然后调整大小，则div转到正确的位置，但是当我在没有调整大小的情况下更改页面时，div保持原样，因此它显示在桌子的顶部附近。

EDIT2：我决定在我使用的jQuery寻呼机插件中挖掘，因为我自己的代码似乎很好。这是我发现的：

function fixPosition(table) {
            var c = table.config;
            if (!c.pagerPositionSet && c.positionFixed) {
                var c = table.config, o = $(table);
                if (o.offset) {
                    c.container.css({
                        top: o.offset().top + o.height() + 'px',
                        position: 'absolute'
                    });
                }
                c.pagerPositionSet = true;
            }
        }

结果是jQuery强迫div的容器到达一个特定的位置。我所要做的就是改变

top: o.offset().top + o.height() + 'px',
position: 'absolute'

到

top: '5px',
position: 'relative'

Answer 1

听起来好像有些Javascript正在运行并对您的网页进行了更改。如果禁用javascript，请重新加载页面并查看源代码 - o您会看到HTML的版本。如果是这样，你只需要追踪javascript;）

Answer 2

您是否检查过没有其他css规则适用于您的div？（可能来自外部样式表，可能是这样的：

#pager { 
    position: absolute !important; 
    top: 494px !important; 
}

您可以尝试的另一件事是在多个浏览器中测试您的页面并确保它们在所有浏览器中每次都发生，这样您就可以确保它不是特定浏览器的错误。

希望它有所帮助！

DIV风格不起作用

2 个答案: