0

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/purecss@2.1.0/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.

zajer
  • 649
  • 6
  • 17

2 Answers2

1

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: Chrome

Google: Firefox

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/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
</head>

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

</html>
PeterJames
  • 1,137
  • 1
  • 9
  • 17
  • Thank you very much for the answer. I have tested once again the provided snippet and it seems this is an OS-specific issue. When posted this question I had tested it on Linux MX and both Firefox and LibreWolf acted the same way while Falkon and Brave acted differently. After your comment I have switched to W10x64 and just like you said the results are consistent between browsers. I need to study the issue further. – zajer Aug 15 '22 at 15:00
0

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

SaroGFX
  • 699
  • 6
  • 20