Why Doesn\'t Box Shadow Work on Table Rows in All Browsers?

Box Shadow Inconsistencies Across Browsers for Table Rows Revisited

Despite efforts to implement cross-browser compatibility, CSS box-shadow on table rows has exhibited inconsistent behavior. While it appears on some browsers, it's inexplicably absent on others.

This enigmatic issue stems from the intrinsic quirks of different browsers when rendering box-shadow on table rows. To resolve this anomaly, a counterintuitive solution presents itself.

Leveraging transform to Trigger Shadow Appearance

By introducing a simple transform property, specifically scale(1,1), and coupling it with box-shadow, the elusive shadow can be summoned. This technique effectively triggers the appearance of the shadow across browsers.

Here's the amended CSS:

<code class="css">tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}</code>

This solution eliminates the perplexing discrepancies, ensuring a consistent display of box-shadow on table rows across browsers.

The above is the detailed content of Why Doesn\'t Box Shadow Work on Table Rows in All Browsers?. For more information, please follow other related articles on the PHP Chinese website!