So I'm having an issue with consistent sizing of "em" values and I can't seem to figure out why.
I am using SCSS for my site and preprocessing all my SCSS files to a single CSS file.
Let me illustrate how my structure is set up.
/* Value used for border width
$defaultBorderWidth: $sizeSmallest; */
.test {
width: 5em;
height: 5em;
border-style: solid;
border-width: 0.15em; /* normally $defaultBorderWidth */
}
.test div {
width: 1em;
height: 1em;
border-style: solid;
border-width: 0.15em; /* normally $defaultBorderWidth */
}<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
</head>
<body>
<div class="test">
<div></div>
</div>
</body>
</html>This in turn shows the result I am expecting, which is a 2px border on both div tags. I am able to replicate this on my site in exactly the same way.
My issue is that in some of my widgets, there are instances where I get a 3px border instead of 2px.
I've read that my border-width could be cascading with another attribute value, but for the life of me can't figure out where or why it's happening. When I look at the developer tools in my browsers I see all instances of border-width are 0.15em.
If an explanation / debug cannot be determined, I can provide a live site example, with the expectation that it will be corrected on the live site ( FYI for future viewers of this article ).
Aucun commentaire:
Enregistrer un commentaire