Why is the distance greater with a margin top in IE? - html

Question

I have the following component in my application
.call-support {
display: flex;
justify-content: center;
padding: 20px 0 20px 0;
}
.container-support {
display: flex;
align-items: center;
}
.support-text {
text-align: center;
margin-left: 10px;
}
.title-text {
font-family: "RalewayRegular";
font-weight: bold;
font-size: 16px;
}
.subtitle-text {
font-family: "RalewayRegular";
font-weight: normal;
font-size: 16px;
}
.customer-service-request {
display: flex;
flex-direction: column;
align-items: center;
padding: 10% 0 20% 0;
}
.request-text {
display: flex;
}
.number {
font-size: 18px;
color: #D53865;
font-weight: bold;
background-color: #f9f4f1;
width: 340px;
height: 130px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.number:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 65px solid #666B74;
border-left: 65px solid #f9f4f1;
width: 0;
border-bottom: 65px solid #666B74;
}
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
display: flex;
margin-top: 40px;
}
.number-request {
font-family: "RalewayRegular";
color: #fff;
font-size: 18px;
font-weight: bold;
background-color: #666B74;
height: 40px;
width: 340px;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="call-support">
<div class="container-support">
<div class="request-text">
<p class="number">000 000 000<span class="subtitle-number">(local call)</span></p>
<p class="number-request">Customer Service</p>
</div>
</div>
</div>
It is well laid out with this css in all browsers, except in Internet Explorer where the margin top of "subtitle-number" shows it almost stuck to the margin-bottom of the box it belongs to.
Here I leave a link to a codepen with the design.
https://codepen.io/CharlieJS/pen/dyXyBBe
and an image of how it looks in Internet Explorer
How can I adjust the design to display in all browsers?
Why is the margin-bottom higher in IE?
thank you all for your time and help

Answer 1

This is created by display: flex; in class .subtitle-number. So just remove it and it will work fine.
Try to set this class wit top & left like:
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
/*display: flex;
margin-top: 40px;*/
top:70%;
left:50%;
transform: translate(-50%, 30%);
}
As position absolute is better set with top, right, bottom, left. It seems to work fine by me on w3schools on IE11.
DEMO
.call-support {
display: flex;
justify-content: center;
padding: 20px 0 20px 0;
}
.container-support {
display: flex;
align-items: center;
}
.support-text {
text-align: center;
margin-left: 10px;
}
.title-text {
font-family: "RalewayRegular";
font-weight: bold;
font-size: 16px;
}
.subtitle-text {
font-family: "RalewayRegular";
font-weight: normal;
font-size: 16px;
}
.customer-service-request {
display: flex;
flex-direction: column;
align-items: center;
padding: 10% 0 20% 0;
}
.request-text {
display: flex;
}
.number {
font-size: 18px;
color: #D53865;
font-weight: bold;
background-color: #f9f4f1;
width: 340px;
height: 130px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.number:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 65px solid #666B74;
border-left: 65px solid #f9f4f1;
width: 0;
border-bottom: 65px solid #666B74;
}
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
/*display: flex;
margin-top: 40px;*/
top:70%;
left:50%;
transform: translate(-50%, 30%);
}
.number-request {
font-family: "RalewayRegular";
color: #fff;
font-size: 18px;
font-weight: bold;
background-color: #666B74;
height: 40px;
width: 340px;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="call-support">
<div class="container-support">
<div class="request-text">
<p class="number">000 000 000<span class="subtitle-number">(local call)</span></p>
<p class="number-request">Customer Service</p>
</div>
</div>
</div>

Answer 2

The absolute property is set in this style but the coordinate value is not set. Because of the different calculation methods such as element position parameters in different browsers, the results are not the same in different browsers.
At this time, it is not necessary to use relative positioning, but to have a certain coordinate. Please modify the .subtitle-number style as following:
.subtitle-number {
position: absolute;
font-family: "RalewayRegular";
font-weight: normal;
font-size: 12px;
top: 80px;
left: 145px;
}
Result in IE: