WebKit 的表格问题答案

【问题标题】：Table problems with WebKitWebKit 的表格问题
【发布时间】：2016-09-15 23:31:12
【问题描述】：

我无法让此代码在 WebKit 浏览器 (chrome/safari) 中正确显示。它在 IE6、IE7 和 FireFox 中看起来不错。

<table width="100%">
    <tr>
        <td rowspan="2" style="vertical-align:middle;">
            <a href="http://http://{$smarty.const.DOMAIN}/company/a_cherry_on_top/line/gift_cards/?v=s2"><img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/></a>
        </td>

        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=2044" target="_top">Wishlist</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=2125" target="_top">Link to Us</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://www.shareasale.com/shareasale.cfm?merchantID=8362" target="_blank">Affiliate Program</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=1521" target="_top">Privacy</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=1395" target="_top">Guarantee</a>
        </td>

        <td rowspan="2" style="width:160px;">
            <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
        </td>
    </tr>
    <tr>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=3069" target="_top">About Us</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=1467" target="_top">Shipping</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=12342383" target="_top">Why Buy From Us</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/article?a=1397" target="_top">Contact Us</a>
        </td>
        <td style="vertical-align:middle;">
            <a href="http://{$smarty.const.DOMAIN}/help" target="_top">Help</a>
        </td>
    </tr>
</table>

问题在于 WebKit 使顶行非常小，而底行填充了其余空间，而不是每行具有相等的高度。

有人知道如何让它在基于 WebKit 的浏览器中显示为我希望的样子吗？

【问题讨论】：

将该代码粘贴到 Safari 和 Chrome 中对我来说效果很好。查看 Smarty 生成的实际 HTML 会很有帮助。更重要的是查看一个实时示例或至少所有生成的 HTML。
你在 W3C 验证过语法吗？

标签： css webkit html-table

【解决方案1】：

我有一些建议给你，但我不能完全回答你的问题，因为当我尝试 WebKit 时似乎可以很好地呈现你的源代码。

首先，也许您可以将width="100%" 更改为style="width:100%;" 或者结合其他标记，将浏览器置于怪异模式。
其次，确保您有正确的 doctype 并且您的代码验证或至少接近。我在复制和粘贴代码时使用的 doctype 是 XHTML Strict。

否则，请发布整个页面的源代码或仅链接到现场演示。即使是屏幕截图也会有所帮助。

【讨论】：

【解决方案2】：

我可以通过一个现场示例来提供更多帮助，但您可以尝试将其添加到您的 tr 标记中。

<tr style="height: 50%;">

假设您只需要两行，这将使它们的高度相等。

【讨论】：

【解决方案3】：

以下是确保它在 webkit 中未正确显示的正确示例：

<table width="200" border="1">
  <tbody>
    <tr>
      <td rowspan="2" width="15">
        this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
      </td>
      <td>
        this should be big instead
      </td>
    </tr>
    <tr height="20">
      <td height="20">
        this row fails to size to 20 height on webkit
      </td>
    </tr>
  </tbody>
</table>

你可以看到左边部分渲染得很好，但右边部分应该不同，因为顶行应该填充左边的空间，底行设置为 20 高度（你看不到 tr webkit 不考虑高度和 td 高度）。这在所有其他浏览器中都可以正常呈现

编辑：在玩弄并修补了我的问题之后，我得出了以下解决方案。完全依赖 jquery 从要更改的行中读取 height 属性：

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pipnorowspan").height(function(){
    return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2;
});
});
</script>
</head>
<body>
<table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable">
  <tbody>
    <tr style="border:1px solid #000;">
      <td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;">
        this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
      </td>
      <td id="pipnorowspan" style="border:1px solid #000;">
        this should be big instead
      </td>
    </tr>
    <tr height="20" id="piplowerrow" style="border:1px solid #000;">
      <td height="20" style="border:1px solid #000;">
        this row fails to size to 20 height on webkit
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

【讨论】：