表の罫線が正しく表示されない：相対

Question

次の条件が満たされたときに、私は常に正しくレンダリングしませ表の罫線に問題を抱えている：

• 表はdiv要素内に含まれているoverflow-y:scroll
で
• 国境を
• 要素がposition:relative

のように近い私が言うことができるように、これが唯一のクロム（Versiで発生しているスタイルされているテーブルの上に倒れていますMac OS 10.11.6では54.0.2840.98）。私はSafariとFirefoxで問題なくテストしました。

私はJSFiddle（https://jsfiddle.net/5a0a4sL1/24/）で最小限のケースを管理しました。コードは次のようになります。

.scroll { 
 
    background-color:white; 
 
    overflow-y: scroll; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.wrapper { 
 
    height: auto; 
 
    width: 280px; 
 
    padding: 10px; 
 
    margin: 0px; 
 
} 
 
table { 
 
    width:90%; 
 
    margin:0px 5%; 
 
    border-collapse:collapse; 
 
} 
 
td { 
 
    position:relative; 
 
    border:1px solid black; 
 
}

<div class="scroll"> 
 
    <div class="wrapper"> 
 
    <table> 
 
     <tbody> 
 
     <tr><td style="height:39px;"></td></tr> 
 
     <tr><td style="height:75px;"></td></tr> 
 
     <tr><td style="height:111px;"></td></tr> 
 
     <tr><td style="height:39px;"></td></tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

問題がありますときに、ページは次のようになります。ここでは

下の行とA-のために国境をテーブルの内容は表示されますが、テーブルのビットはレンダリングに失敗しています。問題の存在と深刻さは、Chromeウィンドウのサイズによって異なります。これは、これがブラウザのバグだと思うようにします。

私の質問はこれです：私は明らかにブラウザを悪用しているように見えるコードには何かがありますか？ Chromeを怒らせずに、同じタスク（位置：リサイズハンドルの配置に相対的な位置付けが必要）を達成するための調整が必要ですか？それとも、これはブラウザのバグだけですか？

編集：：これは「テーブルの境界が位置：相対で消える」問題ではないと私は考えています。here, for example表のセルの境界線は部分的にレンダリングされることが多く、y方向のスクロールが削除されるなどの問題はなくなります。

Answer 1

私はこの問題を再現しました。レンダリングはブラウザごとに異なります。それはブラウザのバグかもしれません。

すべてのブラウザで完全に機能するようにする簡単な回避策は、tdに<div>を追加し、position: relativeでスタイルを設定することです。 divと同じ高さをtdとしたい場合は、height: 100%と指定してください。

ここにはdemoがあります。

オフトピックノート（問題の原因にrelavantの種類）：

あなたは幅300ピクセルを持つ要素にパディング10pxのを与える場合には、実際の幅は320ピクセルになります。また、1pxに境界線を付けると、実際の幅は322pxになります（境界線は1px、境界線は1pxになります）。 padding 10pxとborder 1pxの実際の300pxを取得するには、要素にこの属性（box-sizing: border-box;）を指定します。同じ概念が「高さ」に適用されます。

たとえば、要素の高さ39pxと境界1pxを指定した場合、実際の高さは41px（1pxの上端+ 1pxの下端）です。 tdにbox-sizing: border-boxを追加すると、高さは39pxになります。