CODEWITHSUNDEEP
csswidthpure-css
zajer
zajer

Reputation: 813

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

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.

Upvotes: 0

Views: 542

Answers (2)

SaroGFX
SaroGFX

Reputation: 919

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

Upvotes: 0

PeterJames
PeterJames

Reputation: 1353

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/[email protected]/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
</head>

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

</html>

Upvotes: 1

Related Questions