css - 当 Firefox 4 报告表格单元格的 offsetWidth 不一致时的解决方法是什么-6ren

css - 当 Firefox 4 报告表格单元格的 offsetWidth 不一致时的解决方法是什么

转载作者：行者123 更新时间：2023-11-28 14:38:08

24

4

我有一个甘特图类型的 Web 控件:一个 html 单元格表(例如，一个单元格代表一天)和一些绝对定位的 div 代表条形图 - div 的父元素是适当的开始 TD。我设置了 div 的宽度，以便它们覆盖适当的天数。宽度是通过对 div 覆盖的单元格的 offsetWidth 值求和来计算的。

这在 IE7、Chrome 和 Opera(我认为在 Firefox 2)中正常工作，但在 Firefox 4 中不正常。 div 的长度有时太短有时太长。从调查问题来看，它似乎与类似于 that described here 的子像素问题有关。

我看到的(参见下面的源 html)是我的 100% 宽表格(它的 offsetWidth 报告为 1311 px)被分成 30 个单元格，平均应该占用 43.7 px。显然它必须使用整数，但 Firefox 4 报告每个单元格都有一个 offsetWidth = 44 像素，因此对于覆盖每个单元格的 div，它的 offsetWidth 是 1320 像素(9 像素到大)。显然，该表保留其 1311 像素的宽度，表明单元格 offsetWidth 可能报告 44，而在某些情况下单元格实际占用 43 像素

与 chrome、opera 和 IE7 相比，单元格的 offsetWidth 是 44 和 43 像素的混合，但加起来正确的最终宽度为 1311。

问题是我如何解决 Firefox4 的这种行为以确保我的 div 具有正确的长度。

我还没有在其他版本的IE上测试过

这是该问题的一个简化工作示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
    <title>Planner Test</title>
    <style type="text/css">

    body
    {
        font-size:10px;
    }
    table
    {
        width:100%;
        border-collapse:collapse;
        border-spacing:0px;
        table_layout:fixed;
        margin: 0px 0px 0px 0px;
        padding: Opx 0px 0px 0px;

    }

    table td,
    table th
    {
        overflow: hidden;
        vertical-align:top; 
        height:19px;
        border:1px solid red;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    div.PlannerItem
    {
        text-align:right;
        overflow: hidden;
        position:absolute;
        height:16px;

        border: solid 0px black;
        background-color: yellow;
        color: #334575;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    </style>
    <script type="text/javascript">
    //<![CDATA[

    function WIDTH( el ) {
        // use offsetWidth - supposed to be most consistent accross browsers
        return parseInt( el.offsetWidth );
    }

    function createRows()
    {
        var nbCells = 30;  // set to vary the number of cells

        var thead = document.getElementById( "tablehead" );
        var fragment = document.createDocumentFragment();
        var row = document.createElement( "tr" );
        var th;

        // create header row % width calculated from nbCells
        for( i = 0; i < nbCells; i++ ) {
            th = document.createElement( "th" );

            th.style.width = (100.0 / nbCells) + "%";
            row.appendChild( th );
        }
        fragment.appendChild(row);
        thead.appendChild(fragment );

        // body rows
        var tbody = document.getElementById( "tablebody" );

        for ( i = 0; i < nbCells; i++ ) {
            fragment = document.createDocumentFragment();
            row = document.createElement("tr");
            for ( j = 0; j < nbCells; j++ ) {
                var cell = document.createElement( "td" );
                if ( j == 0 ) {
                    var div = document.createElement("div");
                    div.className = "PlannerItem";
                    cell.appendChild( div );
                }
                row.appendChild( cell );
            }

            fragment.appendChild(row );
            tbody.appendChild(  fragment );
        }

        setWidths();

    }
    function setWidths()
    {
        var rows = document.getElementsByTagName( "tr" );

        // show cell widths in header
        cells = rows[0].getElementsByTagName( "th" );
        for( i = 0; i < cells.length; i++ ) {
            cells[i].innerHTML = WIDTH(cells[i]);
        }

        // calculate widths for divs 
        for( i = 1; i < rows.length; i++ ) {
            var cells = rows[i].getElementsByTagName( "td" );
            var width = 0;
            var div = cells[0].firstChild;
            for( j = 0; j < i; j++ ) {

                width += parseInt( WIDTH( cells[j]) );

            }

            div.style.width = width + "px";
            div.innerHTML = WIDTH(div);
        }
    }//]]>
    </script>

</head>
<body onload='createRows();'>
    <form id="form1" runat="server" >
        <table id="tab">
            <thead id="tablehead">
            </thead>
            <tfoot></tfoot>
            <tbody id='tablebody'></tbody>
        </table>
    </form>
</body>
</html>

最佳答案

看起来使用 getBoundingClientRec() 而不是 offsetWidth(参见 http://weblogs.mozillazine.org/roc/archives/2008/01/subpixel_layout.html)解决了问题 - 需要使用此值计算 div 宽度以免丢失精度:在这种情况下 div 与单元格正确对齐

关于css - 当 Firefox 4 报告表格单元格的 offsetWidth 不一致时的解决方法是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6457265/

24

4

0

文章推荐： javascript 获取从今天起两年后的日期名称

文章推荐： javascript:评估多个 if 语句而不运行 else

java - 捕获的屏幕截图附加到本地 Cucumber 报告，但不附加到 Jenkins 报告
@After public void afterScenario() { if (ScenarioManager.getScenario().isFailed()) {
mysql - Grails + BIRT 报告 - 将月份和年份作为日期传递到 BIRT 报告
我已将 BIRT 报告集成到 Grails 中并设计了一份报告。我的 grails 应用程序中有一个名为 startPeriod (仅限月份和年份)的参数，我想将其传递给 BIRT。然后 BIRT 调
oracle - 将 Oracle 报告 (.rdf) 转换为 BIRT 报告
我有一些 Oracle 报告 (.rdf)，正在考虑将其转换为 BIRT 报告。有没有办法将 .rdf 文件转换为 BIRT 报告设计文件？最佳答案完全自动化的解决方案可能是不可能的。您可以部分自
gcc - 为什么 gcc 4.1 + gcov 报告 100% 的分支覆盖率和更新的(4.4、4.6、4.8)报告 "p = new class;"行的 50%？
当 gcc 4.1(使用 gcov)下一行: p = 新类；报告为 100% 分支覆盖率为什么？因为启用了异常处理!!! 为了解决此问题，请指定: -fno-exceptions 在 g++
Bugzilla 报告
真的有好免费 BugZilla 报告工具？我发现 Web 界面上的默认搜索选项太有限了。我最大的问题是缺少 Order By 选项(一次只有 1 个字段，可供选择的字段集非常有限)。我已经做了一些谷
ColdFusion 报告
是否可以在 CFMX7 上运行 ColdFusion Report builder 生成的报告？更明确地说，是否可以将 CF7 中的报告生成引擎更改为 CF8？最佳答案我猜这可能很难做到。我记得
报告：2025年智能家居市场的机会将达到1190亿美元
根据Lucintel发布的新市场报告，智能家居市场的未来看起来很有吸引力，在家用安全、家电、娱乐、照明、HVAC、医疗保健和厨房应用中将带来许多机遇。由于COVID-19导致的全球经济衰退，
PHPCodeSniffer HTML 报告？
PHPCodeSniffer 是否生成 HTML 报告？如果不是呢？怎么办？目前，我可以运行 PHPCodeSniffer，但它只生成 XML 文件并在终端中显示结果。如何在 phpunit 中
PHPUnit 报告 PHPUnit_Framework_Exception
我在一个包中添加了一个简单的测试。按照手册中的建议，我尝试让 PHPUnit 加载配置: phpunit -c /app phpunit.xml 看起来像这样:
报告 R 中两个数据框之间的差异
我有两个从 csv 文件加载的数据框。基本上来自不同的环境但格式/列相似，它们的行/值可能有所不同。我想找到差异并在新的数据框中创建它们。两个数据框也将具有相同的顺序。我有 100 个要比较的文件。提
JUnit 报告——测试方法描述
我想看看是否有办法通过 javadoc 在我的 junit 报告中包含“描述性文本”。 JUnit 4 似乎不像 TestNG 那样支持 @Test 注释的“描述”属性。到目前为止，我所研究的只有一
Java Struts 报告
我正在使用操作、 Controller 、servlet struts 框架编写 Excel 报告。该报告非常拥挤，已经有大约 10 个单独的查询。由于报告发生变化，我需要再添加大约 10 个查询。有
OpenERP Jasper 报告
在放弃 Syleam 的 openerp jasper 模块后，我在 Nan Tic 的 jasper_reports 模块上苦苦挣扎。它一直给我一个错误: File "C:\Program Fil
php - 按每天按每月计数生成统计数据/报告
我希望创建一个简单的日历。每天由编码器生成条目计数并以日历样式查看。如一月、二月等。或按月显示全年。 database have date_added and encoder columns 我在将它
MySQL 报告 - 订单历史记录
我必须为报告创建 MySQL 查询。我有一个表history，它记录产品订单的状态更改。我有订单生命周期(订单流程)的以下状态:新、已确认、正在处理、已发货、已交付、已取消、已退回。订单不一定遵循此
mysql - 多个查询合而为一(报告)？
如何将多个查询合并为一个？例如: //Successful Sales: SELECT username, count(*) as TotalSales, sum(point) as Points
用于性能优化的 mysqltuner 报告
MySQL 优化技术的新手。请找到下面的 mysqltuner.pl 报告，并建议我应该更改 my.cnf 中的哪些变量以优化性能。还有一个问题- 我无法在我的 my.cnf 中找到一些变量，例如
java - 事件调度线程 - 报告
我想知道，我想将我的 Swing Worker 的某种形式的进度报告回主线程，以便我的界面可以使用随着进度增加而变化的标签进行更新，例如 checking 1/6... checking 2/6...
Magento Paypal 报告
我正在尝试在“报告”>“销售”下运行 Magento Paypal 结算报告，但每次我尝试运行该报告时，我都会收到消息“由于配置为空，无法获取任何内容” 我查看了“系统”>“配置”>“销售”>“付款方
MySQL 报告 - 编辑器
我想要一个工具来帮助创建 sql 查询(对于非 IT 人员)，例如 dbforge。我希望我们的非 IT 人员(例如运营)创建他们自己的 sql 查询。我的第二个目标是让他们能够按需执行这些查询。

首页

博学

6Ren·AI

商城

css - 当 Firefox 4 报告表格单元格的 offsetWidth 不一致时的解决方法是什么