Home / Questions / 422115
Accepted
Agustin G.
Asked: 2022-01-21 05:29:27 +0800 CST 2022-01-21 05:29:27 +0800 CST

Same CSS in different browsers, different results

  • 772

I have a list of items that have a delete button with them.

.container-solicitud-cursos .lista-items .caja-item {
    display: grid;
    grid-template-columns: 90% 10%;
    border-bottom: 2px dashed #c6c6c6;
    padding: 1.5em 0em;
}

.container-solicitud-cursos .lista-items .caja-item:first-child {
    padding-top: 0;
}

.container-solicitud-cursos .lista-items .caja-item:last-child {
    border-bottom: 2px solid #c6c6c6;
}

.lista-items .caja-item .item-eliminar {
background-color: #d9d9d9;
color: #808080;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(45deg);
font-size: 40px;
border-radius: 50%;
border: 0px;
}

.lista-items .caja-item .item-eliminar:hover{
    background-color: #dedede;
    color: #adadad;
}

.lista-items .caja-item .item-eliminar::after {
    content: "+";
}
<div class="lista-items">
               <div class="caja-item">
                <div>
                  <div class="item-titulo">Trabajos de extension en vt (1kv)</div>
                  <div class="item-resumen">2 Empleados / 1º Trimestre 2021</div>
                </div>
                <div>
                  <button class="item-eliminar"></button>
                </div>
              </div>

And I see things different in Chrome and in Firefox:

This is how it looks in Chrome, it is the result that I expect

enter image description here

This is how it looks in firefox, and I don't want this.

enter image description here

(I tried to execute this code in both browsers, from the SO snippet and I see the same problem, so if you take this question from one browser to another you will see what I see)

css

1 Answers

  1. Best Answer

    The problem is because each browser, by default, applies different styles to different elements.

    The solution is to unify these styles, either manually or using an existing library, such as:

    demonstration:

    .container-solicitud-cursos .lista-items .caja-item {
  display: grid;
  grid-template-columns: 90% 10%;
  border-bottom: 2px dashed #c6c6c6;
  padding: 1.5em 0em;
}

.container-solicitud-cursos .lista-items .caja-item:first-child {
  padding-top: 0;
}

.container-solicitud-cursos .lista-items .caja-item:last-child {
  border-bottom: 2px solid #c6c6c6;
}

.lista-items .caja-item .item-eliminar {
  background-color: #d9d9d9;
  color: #808080;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(45deg);
  font-size: 40px;
  border-radius: 50%;
  border: 0px;
}

.lista-items .caja-item .item-eliminar:hover {
  background-color: #dedede;
  color: #adadad;
}

.lista-items .caja-item .item-eliminar::after {
  content: "+";
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.css"
/>
<div class="lista-items">
  <div class="caja-item">
    <div>
      <div class="item-titulo">Trabajos de extension en vt (1kv)</div>
      <div class="item-resumen">2 Empleados / 1º Trimestre 2021</div>
    </div>
    <div>
      <button class="item-eliminar"></button>
    </div>
  </div>
</div>

    • 2