【问题标题】:Why does Safari ignore css table row (tr) height attributes after re-draw?为什么重新绘制后Safari会忽略css表格行(tr)高度属性?
【发布时间】:2017-01-15 01:36:13
【问题描述】:

我正在努力将 css 样式应用于 Safari 中的 GWT(Google Web Toolkit)生成的 html 表。具体来说,在触发任何类型的表格重绘后,我无法让 Safari 尊重表格行的高度属性。

以下基本示例说明了问题:

<html>
    <head>
        <style type="text/css">
            tr {
                height: 50px;
                font-weight: bold; /* added to prove that other style rules are re-applied when enabling css again */
            } 
        </style>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>one</td>
                <td>two</td>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>

如果我在 Safari 中打开此页面,它首先会正确呈现。如果我随后从“开发”菜单中选择“禁用样式”,然后立即再次重新启用它们,则会忽略高度规则,并且计算表格行的高度,就好像它被设置为“自动”一样。

这正是在我的 GWT FlexTable 中以编程方式添加或删除行/单元格时发生的情况。

有谁知道导致这种行为的原因以及是否有不需要在整个桌子上设置固定高度的解决方法?

详情: 在 Mac OSX Leopard 上运行 Safari 4.0.3 (5531.9)
使用 GWT 托管模式浏览器(在 Mac 上运行时本质上是 Safari)也会出现此问题

【问题讨论】:

    标签: css gwt safari webkit html-table


    【解决方案1】:

    TR 标签在 W3C 规范中没有高度属性。您应该设置它包含的 TD 标记的高度。

    【讨论】:

    • 你确定吗?我的印象是“标签”高度属性已被弃用,但将高度设置为 css 样式规则是可以的。那就是: 不好: 好的: w3.org/TR/CSS2/tables.html#height-layout 17.5.3 下的第二段说: 'table-row' 元素的高度一旦用户代理使行中的所有单元格可用,就会计算框:它是行的指定“高度”的最大值和单元格所需的最小高度 (MIN)。
    • 嗯。 W3Schools 在任何 DTD (w3schools.com/tags/tag_tr.asp) 中都没有列出 TRs 的高度属性,但将其列在 TD (w3schools.com/tags/tag_td.asp) 下,因为 CSS 已弃用。
    • 没错,但它确实有一个样式属性,我正在尝试将高度设置应用为样式规则,而不是直接的“标签”属性。
    • @sarnelid,无论您 如何 应用“高度”(无论是通过 style: XX 还是 height="xx"),问题在于表格行的高度由表格单元格的高度决定。这是有道理的,如果您将&lt;tr&gt; 视为&lt;td&gt;s 的语义分组,而不是元素本身(这是不诚实的,但我是这样想的,以便理解它)。
    • 谢谢!我想我误解了规格。从现在开始,我将坚持为单元格设置样式。 =)
    【解决方案2】:

    WebKit 针对性能进行了优化,如果它认为没有必要,有时会拒绝重绘某些区域。您可以通过触发完全重绘来解决此问题,例如将窗口大小调整 1px 和 1px(必须有一些更聪明的方法)。

    【讨论】:

    • 谢谢,我会尝试一些类似的方法,同时仍然希望有一个更清洁的解决方案。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签