I designed a close icon, but they appear different in Firefox and Chrome. I set the same line-height same as the height, it's working for Firefox but not for Chrome. I have been faced this issue before for different elements but I didn't get it.
Here is code:
.careerClose {
font-size: 20px;
display: inline-block;
position: absolute;
right: 20px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
text-align: center;
border: 1px solid #dc3545;
}
If I set line height 32px, then it's looking good in Chrome. I also tried line-height 1.2.And both two browsers are up-to-date.
Below image view for Firefox.
Below image view for Chrome.
Thanks.
