-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 がオンになっていて、コードが検証されるか、少なくともそれに近づくことを確認してください。コードをコピーして貼り付けるときに使用した 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 に完全に依存しています。

<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

テストする実際の例でさらに支援できますが、これをtrタグに追加してみてください。

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

必要な行が 2 つだけであると仮定すると、これによりそれらが同じ高さになります。

于 2009-01-05T15:14:17.413 に答える