テーブルCSSはChromeとFirefoxで異なる効果があります

Question

テーブル内の列の高さがあらかじめ定義され、スクロールしてコンテンツが収まるようにしようとしています。私は現在ChromeとSafariで動作しますが、Firefoxでは動作しません（少なくともMacBookでは）。 Firefoxでは、表の高さが何らかの理由ですべての内容に適合するように拡大します。ここで

はHTML、

<table> 
<tbody> 
    <tr> 
     <td> 
      <div class="scrolling_div"> 
       ...{content}... 
      </div> 
     </td> 
    </tr> 
</tbody> 

CSS、

/*** css reset ***/ 
html * { margin: 0; padding: 0; border: 0; font-size: 1em; text-decoration: none; line-height: 1em; } 
ol, ul { list-style: none; } 
table { border-collapse: collapse; border-spacing: 0; } 

/*** actual css ***/ 
table { 
    width: 50vw; 
    height: 50vh; 
    border: 1px solid red; 
} 

.scrolling_div { 
    height: 100%; 
    overflow-y: scroll; 
} 

とJSFiddle for this questionです。

.scrolling_divの高さを特定のピクセル数に設定すると修正できますが、テーブルを塗りつぶすために100％にしておきたいので、これはさまざまなテーブルサイズで機能します。

ご協力いただければ幸いです。

Answer 1

だけで '最大の高さを：tableHeight' を追加

.scrolling_div { 
    height: 100%; 
    overflow-y: scroll; 
    max-height: 50vh; 
} 

Answer 2

ブラウザでは、スタイリングのような処理が異なります。 ChromeとSafariはどちらもWebKitブラウザなので、同様の結果が得られます。

ベンダーのプレフィックスを参照することで、特定のブラウザーをターゲットにすることができます。

あなたはChromeとSafariでテーブル50%のborder-radiusを望んでいたとしましょう、しかし、Firefoxはデフォルトでより多くのパディングを追加しているので、あなたは45%に、一人でそのブラウザのためにそれをトーンダウンしたいと思います：

table { 
    border-radius: 50% // non-specified browsers will fallback to this 
    -webkit-border-radius: 50%; // safari and chrome 
    -moz-border-radius: 45%; // firefox 
} 

ここ

はwebkitのためのベンダー拡張の束のリストである：私はまさにあなたの問題を引き起こしているかわからないんだけど https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions

- しかし、あなたは、ブラウザ間で異なる動作を取得している場合は、ベンダープレフィックスをするための最良の方法ですデバッグから始める。