不透明度を下げた背景を必要とするセルがあり、上部のテキストが背景の影響を受けないテーブルで作業しています。セルの内容は動的です。
IE9（他のIEバージョンではテストされていません）では、スパンコンテンツで背景がクリップされます。Firefoxでは、背景が乱暴になり、右下にオーバーフローします。クロムでは、これは魅力のように機能します。
それを完全にカバーしていなかったいくつかの同様の質問： <div>を<td>の高さに塗りつぶす方法 誰かがtdに1pxの高さを提案しました-これは私にとってはうまくいきませんでした、何も変わりませんでした。また、この問題を解決するためにJSを使用したくありません。
もう1つの関連する問題： IE9でのCSS絶対測位
のバグ奇妙なことはIE9にあり、これは互換モードで機能しましたが、それなしでは機能しませんでした。
これは確かに不可能に見えます。各セルの幅と高さを具体的に定義しない限り、テーブルを使用するという目的が損なわれます。
可能性のあるソリューション...
背景色を使用するbackground-color: rgba(200,200,200,0.5)場合、失敗した場合はいつでも単色にフォールバックして使用できます。RGBAのサポートは、すべての上位のブラウザーで行われていますが、IE8以下では機能しません...
明らかに簡単な方法は、透明なPNGの使用にフォールバックすることですが、これは、使用している色が事前定義されており、かなり堅固であることに依存しています。
FireFoxを機能させるためのもう1つの狂った解決策（色ではなく背景画像を使用している場合）は、この機能を使用するbackground: moz-element()ことです。ここでは、必要になる可能性のあるさまざまな不透明度の非表示要素をページ上に作成し、それらをidを介して背景として参照します。例えば：
<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>
次に、背景を表示する要素でそれを参照します。
<td style="background: -moz-element(#image1);"></td>
私はこの方法を保証していませんが、それはかなりエレガントではなく、ブラウザ固有です。Tbh私は、この問題が（特にFFで）昔ながらの絶対的および相対的なトリックを使用して実際に修正できないことを知って非常に驚いています。
より多くのブラウザでサポートされるソリューションは、テーブルを使用してドロップし、古き良きdivとfloatを使用してテーブル構造を再作成することです。このソリューションの唯一の問題は、ほとんどの幅と高さを定義する必要があり、FlexBoxのようなさらに実験的なものにフォールバックしない限り、垂直方向のセルの配置を実現できないことです。
LESSやBlueprintなどのCSSフレームワークを試してみることができます。ほとんどのフレームワークには、通常は微調整が必要な場合でも、すべてのブラウザーで同じスタイルに見えるようにするバックグラウンドコードがあります。