1

私はこの問題に数時間苦労してきました。ボタンとして画像の周りに3つのアンカーがラップされたテーブル行があります。ほとんどのブラウザーでは問題ありませんが、Firefox と IE では、「A」タグのある表の行と次の表の行の間にギャップがあります。Firefox では、アンカーを取り除くと問題がなくなるため、これはアンカーが原因のようです。IE では問題が異なるようで、まだ特定していません。この段階で、誰かが Firefox で解決する方法について手がかりを持っていれば、私は非常に感謝しています. 影響を受けるテーブル行のコード セクションは次のとおりです。

<tr class="topcontrols" height="55">
    <td class="topcontrols"  style="width:13px;" height="55" width="13">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/lt_frame_corner.gif" width="13" height="55" hspace="0" vspace="0" border="0"/>
    </td>
    <td style="width:56px;" height="55" width="56" class="frametop">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/frame_top.gif" width="56" height="55" hspace="0" vspace="0"  border="0"/>
    </td>
    <td class="topcontrols"  style="width:160px;" width="160" height="55">
        <a class="topcontrols"  class="topcontrols"  href="<?php echo $this->baseurl ?>/index.php/novazeal">
            <?php if($this->countModules('novazeal-home')) { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_home_active.gif" width="160" height="55" border="0" />
            <?php } else { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_home_inactive.gif" width="160" height="55" border="0"  />
            <?php } ?>
        </a>
    </td>
    <td class="servicestab" height="55" width="163">
        <div class="servicesdropmenu"></div>
        <a class="topcontrols"  href="<?php echo $this->baseurl ?>/index.php/novazeal/services">
            <?php if($this->countModules('novazeal-services')) { ?>
                <img class="servicestab" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_services_active.gif" width="163" height="55" border="0"  />
            <?php } else { ?>
                <img class="servicestab" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_services_inactive.gif" width="163" height="55" border="0"  />
            <?php } ?>
        </a>
    </td>
    <td class="topcontrols"  style="width:161px;" height="55" width="161">
        <a class="topcontrols"  href="<?php echo $this->baseurl ?>/index.php/novazeal/contact">
            <?php if($this->countModules('novazeal-contact')) { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_contact_active.gif" width="161" height="55" border="0" />
            <?php } else { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_contact_inactive.gif" width="161" height="55" border="0" />
            <?php } ?>
        </a>
     </td>
    <td class="frametop"  style="width:256px;" height="55" width="256">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/frame_top.gif" width="256" height="55" border="0" style="width:256px"/>
    </td>
    <td class="topcontrols"  style="width:14px;" height="55" width="14">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/rt_frame_corner.gif" width="14" height="55" border="0" />
    </td>
</tr>
<tr style="height:100%;">
    <td class="frameedges" bgcolor="#131243" style="background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/left_frame_edge.gif);">
    </td>
    <td colspan="5" BGCOLOR="#ffffee" class="contentarea">
        <jdoc:include type="component" />
    </td>
  <td class="frameedges" bgcolor="#131243" style="background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/right_frame_edge.gif);">
  </td>
</tr>

これらの行で使用される の CSS は次のとおりです。

.contentarea {
    background-color: #ffffff;
    min-height:100%; 
    height:100%; 
    overflow:hidden;
    position:relative; 
    vertical-align: top;
}

.frametop {
    background:url(../images/frame_top.gif);
    max-height:55px; 
    height:55px; 
    overflow:hidden;

}

.topcontrols {
    position: relative;
    max-height:55px; 
    height:55px; 
    overflow:hidden;
}

.servicestab {
    position: relative;
    max-height:55px; 
    height:55px; 
    overflow:hidden;
    width:163px;

}

.servicesdropmenu {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-color:rgba(100,100,255,0.0); 
    height:14px; 
    width:158px; 
    position:absolute; 
    z-index: 100;
    top:38px; 
    left:3px;
}

.servicestab:hover .servicesdropmenu {
    height:100px;
    background-color:rgba(100,100,255,0.92);
}

解決につながる可能性のある考えを事前に感謝します。

テリー・ロズマス。

4

1 に答える 1

1

レイアウトにテーブルを使用することは、悪い習慣です。代わりに css で div を使用してみてください。それははるかに優れており、一度コツをつかめば、より簡単に構成できます。

  1. テーブルは通常、より多くのバイト数のマークアップです。(ダウンロードに時間がかかり、ホストのトラフィックのバイト数が増えます。)
  2. テーブルは通常、インクリメンタル レンダリングを防ぎます。(ユーザーがページ上の何かを見るのに時間がかかります。)
  3. テーブルでは、単一の論理イメージを複数のイメージに分割する必要がある場合があります。（これにより、再設計が完全に地獄になり、ページの読み込み時間も増加します[httpリクエストが増え、合計バイト数が増えます]。）
  4. 一部のブラウザーでは、テーブルがテキストのコピーを中断します (これはユーザーにとって煩わしいことです)。
  5. テーブルは、特定のレイアウトがテーブル内で機能しないようにします (の子要素の height:100% など)。(レイアウトに関して実際にできることを制限します。)
  6. CSS を理解すると、テーブルベースのレイアウトは通常、実装に時間がかかります。(事前に CSS を学習するための少しの努力が、最終的に大きな成果をもたらします。)
  7. 表は、意味的にレイアウトの不適切なマークアップです。(コンテンツではなく、プレゼンテーションを説明します。)
  8. スクリーン リーダーを使用している人にとって、表は人生の地獄です。(CSS の他の利点を得るだけでなく、視覚障害者や弱視者を助けることにもなります。これは良いことです。)
  9. テーブルはあなたを現在のデザインに閉じ込め、再デザインをセマンティックな HTML+CSS よりもはるかに困難にします。
于 2012-04-24T10:55:21.717 に答える