Html 为什么IE中的边距顶部距离更大?

Html 为什么IE中的边距顶部距离更大?,html,css,vue.js,internet-explorer,Html,Css,Vue.js,Internet Explorer,我的应用程序中有以下组件 。呼叫支持{ 显示器:flex; 证明内容:中心; 填充:20px 0 20px 0; } .货柜支援{ 显示器:flex; 对齐项目:居中; } .支持文本{ 文本对齐:居中; 左边距:10px; } .标题文本{ 字体系列:“RalewayRegular”; 字体大小:粗体; 字体大小:16px; } .字幕文本{ 字体系列:“RalewayRegular”; 字体大小:正常; 字体大小:16px; } .客户服务要求{ 显示器:flex; 弯曲方向:立柱; 对齐

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

。呼叫支持{
显示器:flex;
证明内容:中心;
填充:20px 0 20px 0;
}
.货柜支援{
显示器:flex;
对齐项目:居中;
}
.支持文本{
文本对齐:居中;
左边距:10px;
}
.标题文本{
字体系列:“RalewayRegular”;
字体大小:粗体;
字体大小:16px;
}
.字幕文本{
字体系列:“RalewayRegular”;
字体大小:正常;
字体大小:16px;
}
.客户服务要求{
显示器:flex;
弯曲方向:立柱;
对齐项目:居中;
填充:10%0 20%0;
}
.请求文本{
显示器:flex;
}
.号码{
字号:18px;
颜色:#D53865;
字体大小:粗体;
背景色:#f9f4f1;
宽度:340px;
高度:130像素;
位置:相对位置;
显示器:flex;
证明内容:中心;
对齐项目:居中;
}
.号码:之前{
内容:“;
位置:绝对位置;
排名:0;
右:0;
边框顶部:65px实心#666B74;
左边框:65px实心#f9f4f1;
宽度:0;
边框底部:65px实心#666B74;
}
.副标题编号{
位置:绝对位置;
字体系列:“RalewayRegular”;
字体大小:正常;
字体大小:12px;
显示器:flex;
边缘顶端:40px;
}
.号码申请{
字体系列:“RalewayRegular”;
颜色:#fff;
字号:18px;
字体大小:粗体;
背景色:#666B74;
高度:40px;
宽度:340px;
高度:130像素;
显示器:flex;
证明内容:中心;
对齐项目:居中;
}

000(本地电话)

客户服务部


这是由
display:flex课内
。字幕编号
。所以只要去掉它,它就会很好地工作

尝试将该类设置为顶部和左侧,如:

.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%);
    }
由于绝对位置最好使用
上、右、下、左设置。我在IE11上的w3schools上似乎工作得很好

演示
。呼叫支持{
显示器:flex;
证明内容:中心;
填充:20px 0 20px 0;
}
.货柜支援{
显示器:flex;
对齐项目:居中;
}
.支持文本{
文本对齐:居中;
左边距:10px;
}
.标题文本{
字体系列:“RalewayRegular”;
字体大小:粗体;
字体大小:16px;
}
.字幕文本{
字体系列:“RalewayRegular”;
字体大小:正常;
字体大小:16px;
}
.客户服务要求{
显示器:flex;
弯曲方向:立柱;
对齐项目:居中;
填充:10%0 20%0;
}
.请求文本{
显示器:flex;
}
.号码{
字号:18px;
颜色:#D53865;
字体大小:粗体;
背景色:#f9f4f1;
宽度:340px;
高度:130像素;
位置:相对位置;
显示器:flex;
证明内容:中心;
对齐项目:居中;
}
.号码:之前{
内容:“;
位置:绝对位置;
排名:0;
右:0;
边框顶部:65px实心#666B74;
左边框:65px实心#f9f4f1;
宽度:0;
边框底部:65px实心#666B74;
}
.副标题编号{
位置:绝对位置;
字体系列:“RalewayRegular”;
字体大小:正常;
字体大小:12px;
/*显示器:flex;
边缘顶端:40px*/
最高:70%;
左:50%;
转换:翻译(-50%,30%);
}
.号码申请{
字体系列:“RalewayRegular”;
颜色:#fff;
字号:18px;
字体大小:粗体;
背景色:#666B74;
高度:40px;
宽度:340px;
高度:130像素;
显示器:flex;
证明内容:中心;
对齐项目:居中;
}

000(本地电话)

客户服务部


此样式中设置了绝对属性,但未设置坐标值。由于不同浏览器中的元素位置参数等计算方法不同,因此在不同的浏览器中计算结果不尽相同

此时,不需要使用相对定位,而是要有一定的坐标。请修改
。字幕编号
样式,如下所示:

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

1请接受编辑,设置代码段并更正
字体大小:16
字体大小:18px应用于:
.number request
@MaxiGui请不要伪造人们在您的编辑中发布的代码。如果您认为将所述字体大小更改为您所说的字体大小是解决方案的一部分,那么您应该在评论中建议,或者写一个答案。@04FS我不认为这是解决方案的一部分,我认为他没有通过举例加以注意。由于他的图像很好,这不是他描述的问题感谢你的回答,在其他浏览器中它工作没有任何问题,但在Internet Explorer中它仍然是一样的,但它显示在它的末尾div@javascript110899可以尝试
top:70%;左:50%;转换:翻译(-50%,30%)并删除页边距顶部。(我编辑了我的答案)谢谢!抱歉耽搁了。随着更新,它的工作完美