1
私はこの問題に数時間苦労しました。私はボタンのように画像の周りに3つのアンカーがラップされているテーブルの行を持っています。大部分のブラウザでは大丈夫ですが、FirefoxとIEでは、 'A'タグのある表の行と次の表の行の間にはギャップがあります。 Firefoxでは、これはアンカーによって引き起こされるように見えます。なぜなら、アンカーを取り除くと問題が消えるからです。 IEでは、問題は異なっているように見えますが、私はまだそれを分離していません。この段階で、誰かがFirefoxでそれを解決する方法についての手がかりを持っているなら、私は非常に感謝します。ここで影響を受けたテーブルの行のコードセクションは、次のとおりです。テーブルの行間の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);
}
感謝。
テリー・ロズマス。
問題を示すフィドルを作成してください。 – mingos
HTMLだけを過ぎて、テーブル部分を含めてください。 –