purecss - why divs have different width on firefox and chrome?

Question

purecss - why divs have different width on firefox and chrome?

268 Views Asked by zajer At 14 August 2022 at 20:06

Using PureCSS I have noticed that elements with pure-button class differs in width based on browser.

Using the following example:

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
</head>
<body>
    <div  class="pure-button">yolo</div>
</body>
</html>

The div on Chrome is 61.36 pixels width but on Firefox it is wider and takes 65.8433 pixels.

My questions are: What makes the difference and how can I make them identical?

I have already tried setting width via style property but it "cuts" the right part of a padding.

Update 1: Thanks to Peter James answer I have realized that the described problem only occurs on my installation of Linux MX. Firefox on Windows 10 renders the div the same way as other browsers.

Original Q&A

There are 2 best solutions below

**PeterJames** · Answer 1 · 2022-08-15T05:14:07.500000

I copied your code across to SO's code snippet and ran it and then looked at it in the inspector.

Here are two screenshots of the div sizes:

Chrome:

Google:

I am on a Windows 10 PC using Chrome Version 104.0.5112.81 and Firefox Version 103.0.2

The sizes are:

Chrome: 61.36 x 34 and Firefox: 61.35 x 34

Obviously, you can just create your own width class and set the width yourself (as shown in the code snippet below), but this defeats the purpose of using a cross-platform library. Whether this is a browser issue or a Pure.css issue is difficult to say. I checked the Pure.css documentation on Github and they state that it has been tested on: IE 10+, iOS 12+, Android 6+ and the latest stable versions of Firefox, Chrome, and Safari.

.unpure-width {
  width: 70px;
}

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
</head>

<body>
  <div class="pure-button unpure-width">yolo</div>
</body>

</html>

**SaroGFX** · Answer 2 · 2022-08-15T15:34:00.197000

Browser might render fonts slightly different, and this is even more true for different OS, as it will depend also if you have the font locally installed on you PC or not. (If it's not served to you by the website itself, which it's often not)

This can explain a tiny difference in size, but you can easily make them identical by setting the width yourself.

div { width: 100px }

https://developer.mozilla.org/en-US/docs/Web/CSS/width

purecss - why divs have different width on firefox and chrome?

There are 2 best solutions below

Related Questions in CSS

Related Questions in WIDTH

Related Questions in PURE-CSS

Trending Questions

Popular # Hahtags

Popular Questions