Heim  >  Artikel  >  Web-Frontend  >  Warum verhält sich der Boxschatten in Tabellenzeilen in allen Browsern inkonsistent?

Warum verhält sich der Boxschatten in Tabellenzeilen in allen Browsern inkonsistent?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-31 10:44:01258Durchsuche

Why Does Box Shadow on Table Rows Behave Inconsistently Across Browsers?

Box-Schatten auf Tabellenzeilen wirken in verschiedenen Browsern unregelmäßig

Das Anwenden von CSS-Box-Schatten auf Tabellenzeilen führt zu Inkonsistenzen beim Browser-Rendering. Während einige Browser den Schatten wie beabsichtigt anzeigen, rendern andere ihn nicht vollständig.

Um dieses Problem zu beheben, wird das Problem durch Hinzufügen der Eigenschaft „transform: scale(1,1)“ mit box-shadow gelöst. Dies gewährleistet eine konsistente Schattenwiedergabe über alle Browser hinweg.

Aktualisiertes 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>

Aktualisiertes jsFiddle: https://jsfiddle.net/ampicx /5p91xr48/

Das obige ist der detaillierte Inhalt vonWarum verhält sich der Boxschatten in Tabellenzeilen in allen Browsern inkonsistent?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn