-1

我无法让此代码在 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 的浏览器中显示我想要的样子吗？

4

3 回答 3

1

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

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

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

于 2009-06-20T04:40:55.370 回答
0

确保它在 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 高度也看不到td 高度由 webkit 考虑）。这在所有其他浏览器中都很好

编辑：在玩弄和修补我的问题之后，我得出了以下解决方案。完全依赖 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>
于 2011-09-26T13:40:13.820 回答
0

I could help more with a live example to test on but you could try adding this to your tr tags.

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

Assuming you only need two rows this will bring them to equal height.

于 2009-01-05T15:14:17.413 回答