Heim > Web-Frontend > CSS-Tutorial > 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
Freigeben: 2024-10-31 10:44:01
Original
335 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage