クロムのmouseoverイベントでCSS境界線が機能しませんか？

Question

マウスオーバー機能がGoogle Chromeで機能していません。 FirefoxとIEでうまく動作します。マウスオーバーの間、ボーダーの底は消えません。しかし、border-collapse: collapseを取り除くとうまくいきます。どうしてこれなの？任意の解決策。

CSS：

html, body{ 
margin: 0; 
padding: 0; 
} 

.table { 
    border-collapse: collapse; 
} 

.border { 
    border-style: solid; 
    border-width: 1px; 
    border-color: #000000; 
    background-color: #deecf9; 
    border-left: 0px; 
    border-right: 0px; 
} 

.border1 { 
    border-style: solid; 
    border-width: 1px; 
    border-color: #000000; 
    background-color: #deecf9; 
    border-left: 0px; 
    border-right: 0px; 
} 

.border2 { 
    border-style: solid; 
    border-width: 1px; 
    border-color: #000000; 
    background-color: #FFFFFF; 
    border-left: 0px; 
    border-right: 0px; 
    border-bottom: 0px; 
    padding: 1px; 
} 

表：

<table width="1024" border="0" align="center" bgcolor="#FFFFFF" class="table"> 
    <tr> 
    <td height="9" colspan="4" class="border"></td> 
    </tr> 
    <tr> 
    <td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'">&nbsp;</td> 
    <td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'">&nbsp;</td> 
    <td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'">&nbsp;</td> 
    <td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'">&nbsp;</td> 
    </tr> 
</table> 

Answer 1

はこのようにそれを実行してください：あなたの通常の状態要素上に透明の境界線を入れました。 ：ホバーが適用されている場合、ボーダーのサイズは要素が占めるサイズを変更します。

例えば：ちょうどCSSを使用し、

<table width="1024" align="center" bgcolor="#FFFFFF" class="table"> 
<tr> 
    <td height="9" colspan="4" class="border"></td> 
</tr> 
<tr> 
    <td class="border1">&nbsp;</td> 
    <td class="border1">&nbsp;</td> 
    <td class="border1">&nbsp;</td> 
    <td class="border1">&nbsp;</td> 
</tr> 
</table> 

属性としてマウスオーバーで作業する必要はありません：

.border1 
{ 
    border:1px solid #000000; 
    border-left:1px solid transparent; 
    border-right:1px solid transparent; 
    background-color: #FFFFFF; 
} 
.border1:hover 
{ 
    border:1px solid transparent; 
    border-top:1px solid #000000; 
    padding:1px; 
    background-color: #deecf9; 
} 

あなたのHTMLのようなものでなければなりません。

編集：私はあなたがCSS border-collapseプロパティを使用していることに気付きました。これは、テーブルの罫線を単一の罫線に折りたたんで表示するか、標準のHTMLのように切り離すかを設定します。この行を削除してみるか、または "別の"に設定してください。これはうまくいくでしょう。