为什么 IE 中边距顶部的距离更大？答案

【问题标题】：Why is the distance greater with a margin top in IE?为什么 IE 中边距顶部的距离更大？
【发布时间】：2021-01-23 11:59:38
【问题描述】：

我的应用程序中有以下组件

.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>

除了在 Internet Explorer 中，“subtitle-number”的边距顶部显示它几乎粘在它所属的框的边距底部之外，它在所有浏览器中的布局都很好。

我在这里留下了一个带有设计的 codepen 的链接。

https://codepen.io/CharlieJS/pen/dyXyBBe

以及它在 Internet Explorer 中的外观图片

如何调整设计以在所有浏览器中显示？

为什么 IE 的 margin-bottom 更高？

感谢大家的宝贵时间和帮助

【问题讨论】：

第一次请接受编辑，设置 sn-p 并将font-size:16; 更正为font-size: 18px; 应用于：.number-request
@MaxiGui 请不要伪造人们在您的编辑中发布的代码。如果您认为将提到的字体大小更改为您所说的（部分）解决方案，那么您应该在评论中提出建议，或者写下答案。
@04FS 我不认为这是解决方案的一部分，我认为他没有通过举例来关注。因为他的形象很好，不是他描述的问题

标签： html css vue.js internet-explorer

【解决方案1】：

这是由 display: flex; 在类 .subtitle-number 中创建的。因此，只需将其删除，它就会正常工作。

尝试将此类设置为顶部和左侧，例如：

.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%);
    }

因为绝对位置最好用top, right, bottom, left 设置。我似乎在 IE11 上的 w3schools 上运行良好。

演示

.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>

【讨论】：

感谢您的回答，在其他浏览器中它可以正常工作，但在 Internet Explorer 中它仍然是相同的，但它显示在其 div 的末尾
@javascript110899 好的尝试使用top:70%; left:50%; transform: translate(-50%, 30%); 并删除您的顶部边距。（我编辑了我的答案）
谢谢！抱歉耽搁了。随着更新它完美运行

【解决方案2】：

该样式设置了绝对属性但未设置坐标值。由于不同浏览器中元素位置参数等计算方式不同，不同浏览器计算结果也不一样。

这时候就不需要使用相对定位，而是要有一定的坐标。请修改.subtitle-number样式如下：

.subtitle-number {
     position: absolute;
     font-family: "RalewayRegular";
     font-weight: normal;
     font-size: 12px;
     top: 80px;
     left: 145px;
 }

在 IE 中的结果：

【讨论】：