google-chrome - chrome vs FF/IE/Opera 计算表格单元格宽度? (表格布局 :fixed)

标签 google-chrome padding column-width

我现在已经搜索了将近半天......但我找不到为什么 chrome6/7 与 IE8/FF3.6/Opera 相比似乎是唯一没有将填充添加到指定宽度的浏览器表单元格的。

当然,如果您使用 table-layout:fixed,这将变得至关重要,
由于他们突然必须注意指定的 px 宽度这一事实。

好的,最后我的问题:有谁知道为什么 Chrome 的计算方式不同,哪个浏览器是正确的(符合标准),希望有一个优雅的解决方案吗?

目前,我唯一的解决方案是使用 chrome.css 的条件注释,我手动将填充添加到宽度...颤抖...

(顺便说一句:任何想说 px 宽度不适合网络开发的人……请随意离开这个页面,默默地)

补充:(关于回复)
首先感谢您的即时回复...我试图让它尽可能短,因为我将事实减少到最低限度...但是,正如您所提到的,网络开发中有很多变量所以我试图澄清......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
    <style type="text/css">
        div { width:300px; }
        table { table-layout:fixed; width:100%; height:50px; }
        td.col1 { width:20px; background-color:blue; }
        td.col2 { width:40px; background-color:red; }
        td.col3 { width:60px; background-color:yellow; }
        td.col3 { width:auto; background-color:yellow; } 

        td { padding:5px; }
    </style>
</head>
<body>
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                <td class="col3"></td>
                <td class="col4"></td>
            </tr>
        </table>
    </div>
</body>

现在,如果您切换 css 行
td { padding:5px; }

在不同的浏览器中,您会看到 chrome 在宽度内包含填充,而其他浏览器则添加它

希望这有助于澄清并提前致谢
伯尼

最佳答案

我有同样的问题,不幸的是,我没有找到真正的解决方案,但我找到了另外两个线程,一个错误报告 + 一个解决方法。

主题:

  • Table-layout:fixed rendering differences in Safari
  • Webkit browsers not accounting for padding when determining cell width in table-layout:fixed

  • 错误报告:

    https://bugs.webkit.org/show_bug.cgi?id=13339

    可能的解决方案:参见第二个线程。

    关于google-chrome - chrome vs FF/IE/Opera 计算表格单元格宽度? (表格布局 :fixed),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3605367/

    相关文章:

    javascript - 通过 chrome 扩展访问控制台日志命令

    css - 无法覆盖 CSS 填充

    css - 动画不适用于 Chrome

    Android Seekbar 无法删除填充/背景

    C : Dynamic spacing when printing values

    ms-word - Python-docx,如何在表格中设置单元格宽度?

    javascript - 使用内容脚本访问页面上下文变量和函数

    html - 从我的 UL LI 中删除随机填充?

    javascript - 具有相同数量的元素和相同类名的 2 个列表的填充不同

    php - 以类似 HTML 的方式计算列宽(基于单元格内容)