Question

我无法在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的浏览器中显示我想要它的想法吗？

Answer 1

我为您提供了一些建议，但我无法完全回答您的问题，因为当我尝试使用时，WebKit似乎会让您的来源变好。

首先，也许您可以将width="100%"更改为style="width:100%;"或许与其他标记相结合，它会使浏览器处于怪癖模式。
其次，请确保您拥有正确的文档类型，并且您的代码已经验证或至少接近。我在复制和使用时使用的doctype粘贴代码的是XHTML Strict。

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

Answer 2

我可以通过实时示例进行测试，但您可以尝试将其添加到tr代码中。

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

假设你只需要两行，这将使它们达到相同的高度。

Answer 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>

WebKit的表问题

3 个答案: