"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Por qué la sombra del cuadro en las filas de la tabla se comporta de manera diferente en distintos navegadores?

¿Por qué la sombra del cuadro en las filas de la tabla se comporta de manera diferente en distintos navegadores?

Publicado el 2024-11-03
Navegar:521

Why Does Box Shadow on Table Rows Behave Differently in Different Browsers?

Apariencia inconsistente de la sombra del cuadro en las filas de la tabla en todos los navegadores

La sombra del cuadro CSS aplicada a las filas de la tabla (

) puede exhibir un comportamiento inconsistente en varios navegadores. A pesar de que el CSS sea idéntico, algunos navegadores pueden mostrar la sombra según lo previsto, mientras que otros no.

Para resolver este problema, se recomienda utilizar la propiedad transform junto con el atributo box-shadow. Agregar escala (1,1) a la propiedad de transformación obliga al navegador a volver a representar el elemento, asegurando que el efecto de sombra del cuadro se aplique uniformemente.

Aquí está el código CSS actualizado:

tr:hover {
  transform: scale(1,1);
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,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);
}

Al agregar este fragmento de código, la sombra del cuadro ahora aparecerá de manera consistente en todos los navegadores compatibles.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3