How to write css that looks same in all browsers?

Hello! Two month back me and my friend had created front-end of our project, which looked similiarly in browsers -> chrome, firefox, edge in laptop. After a month, we observed changes in alignment of cards, size of forms, buttons on chrome and firefox eventhough we haven't changed any of the code.
Can anyone say what might have caused this?
How professional web dev's write code to avoid such problems?

Comments

[Liv]

One thing that comes to mind, is autoprefixer. A plugin for postCSS

postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.

Write your CSS rules without vendor prefixes (in fact, forget about them entirely):

::placeholder {
  color: gray;
}

.image {
  background-image: url([e-mail]);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url([e-mail]);
  }
}

Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.

::-moz-placeholder {
  color: gray
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url([e-mail]);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image:

…

View on GitHub

.

[Anushree M]

Thank you 🤝

[Will Laurenson]

The best approach is to aim for consistent behavior, rather than expecting every browser to render every detail pixel-for-pixel identically.

A few things help:

Use a small CSS reset or normalize default margins, padding, box sizing, and typography.
Prefer well-supported CSS features and check browser support before relying on newer properties.
Use explicit values for important layout rules such as box-sizing, line-height, and spacing.
Test your page in the browsers you actually need to support, especially Chrome, Firefox, Safari, and Edge.
Avoid browser-specific hacks unless there is a genuine compatibility issue.

If a particular element looks different between browsers, the most useful next step is to share the relevant HTML/CSS and specify which browsers show different results. That makes it possible to identify the actual compatibility issue rather than guessing.