html - 如何在没有固定高度的情况下在 IE 11 中垂直居中文本？

标签 html css internet-explorer flexbox vertical-alignment

我正在尝试从这里的 google-codelabs 页面“克隆”TOC: https://codelabs.developers.google.com/codelabs/cloud-app-engine-aspnetcore

到目前为止，它在 Google-Chrome 和 Firefox 中完美运行。
但是 Internet Explorer (11)... 从第 3 项来看，IE 似乎没有正确地将元素符号垂直居中对齐。
为什么？
如何在 IE 11 中正确地将元素符号和文本垂直居中对齐？

the problem

这就是我所拥有的(or see fiddle) :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Content-Language" content="en" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <meta name="google" value="notranslate" />
    <title>Simple Page</title>

    <style type="text/css" media="all">

        html, body
        {
            width: 100%; height:100%;
            margin: 0px; padding: 0px;
        }


        body
        {
            background-color: #0c70b4;
            color: #546775;
            font: normal 400 18px "PT Sans", sans-serif;
            -webkit-font-smoothing: antialiased;
        }





        .googleblue
        {
            background-color:#1E88E5;
        }

        .bgLeft
        {
            background-color: #F5F5F5;
        }

        .bgRight
        {
            background-color: #E0E0E0;
        }


        .googlefontgray_line
        {
            color: #777777;
        }
    </style>


</head>
<body class="bgLeft">

    <style>

        .paper-item-0
        {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            font-family: 'Roboto', 'Noto', sans-serif;
            -webkit-font-smoothing: antialiased;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;


            position: relative;
            min-height: 48px;
            padding: 0px 16px;
            border: 1px solid hotpink;
        }

        .toc-item
        {
            font-size: 14px;
            color: #9e9e9e;
            overflow: hidden;
            border-radius: 4px;
            padding: 6px 16px;
            box-sizing: content-box;
        }



        .bulletStyle
        {
            display: inline-block;
            font-style: normal;
            width: 24px;
            min-width: 24px;
            background-color: #fff;
            border-radius: 50%;
            text-align: center;
            height: 24px;
            vertical-align: middle;
            line-height: 24px;
            border: 2px solid #bdbdbd;
            margin-right: 8px;
            font-weight: 400;
        }


        .lineAbove::before
        {
            position: absolute;
            top: 0px;
            left: 30px;
            bottom: calc(50% + 12px);
            content: '';
            display: block;
            border-left: 1px solid #bdbdbd;
            #width: 0;
            #height: 44px;
            z-index: 1;
            #margin-top: 1px;
            #margin-left: 11px;
        }

        .lineBelow::after
        {
            position: absolute;
            top: calc(50% + 12px);
            left: 30px;
            bottom: 0px;
            content: '';
            display: block;
            border-left: 1px solid #bdbdbd;
            #width: 0;
            #height: 44px;
            z-index: 1;
            #margin-top: 1px;
            #margin-left: 11px;
        }

        /*
        .lineAbove::before
        {
            border-color: #2196f3;
        }
        */

        .tocText
        {
            font-size: 14px;
            color: #9e9e9e;
            padding: 6px 16px;
        }

    </style>


    <paper-item class="toc-item paper-item-0" role="option" tabindex="0" aria-disabled="false" aria-selected="true">
        <i class="bulletStyle #lineAbove lineBelow">1</i>
        <span class="tocText">Overview</span>
    </paper-item>

    <paper-item class="toc-item paper-item-0" role="option" tabindex="-1" aria-disabled="false">
        <i class="bulletStyle lineAbove lineBelow">2</i>
        <span class="tocText">Setup and requirements
            <br />Line 1
            <br />Line 2
            <br />Line 3
            <br />Line 4
            <br />Line 5
            <br />Line 6
        </span>
    </paper-item>


    <paper-item class="toc-item paper-item-0" role="option" tabindex="-1" aria-disabled="false">
        <i class="bulletStyle lineAbove lineBelow">3</i>
        <span class="tocText">foo</span>
    </paper-item>



    <a class="toc-item paper-item-0" role="option" tabindex="-1" aria-disabled="false">
        <i class="bulletStyle lineAbove #lineBelow">4</i>
        <span class="tocText">foo</span>
    </a>



</body>
</html>

最佳答案

将 .toc-item 规则中的 box-sizing: content-box; 更改为 box-sizing: border-box;

Updated fiddle 

.paper-item-0 {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  position: relative;
  min-height: 48px;
  padding: 0px 16px;
  border: 1px solid hotpink;
}

.toc-item {
  font-size: 14px;
  color: #9e9e9e;
  overflow: hidden;
  border-radius: 4px;
  padding: 6px 16px;
  box-sizing: border-box;
}

.bulletStyle {
  display: inline-block;
  font-style: normal;
  width: 24px;
  min-width: 24px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  height: 24px;
  vertical-align: middle;
  line-height: 24px;
  border: 2px solid #bdbdbd;
  margin-right: 8px;
  font-weight: 400;
}

.lineAbove::before {
  position: absolute;
  top: 0px;
  left: 30px;
  bottom: calc(50% + 12px);
  content: '';
  display: block;
  border-left: 1px solid #bdbdbd;
  #width: 0;
  #height: 44px;
  z-index: 1;
  #margin-top: 1px;
  #margin-left: 11px;
}

.lineBelow::after {
  position: absolute;
  top: calc(50% + 12px);
  left: 30px;
  bottom: 0px;
  content: '';
  display: block;
  border-left: 1px solid #bdbdbd;
  #width: 0;
  #height: 44px;
  z-index: 1;
  #margin-top: 1px;
  #margin-left: 11px;
}


/*
        .lineAbove::before
        {
            border-color: #2196f3;
        }
        */

.tocText {
  font-size: 14px;
  color: #9e9e9e;
  padding: 6px 16px;
}
<paper-item class="toc-item paper-item-0" role="option" tabindex="0" aria-disabled="false" aria-selected="true">
  <i class="bulletStyle #lineAbove lineBelow">1</i>
  <span class="tocText">Overview</span>
</paper-item>

<paper-item class="toc-item paper-item-0" role="option" tabindex="-1" aria-disabled="false">
  <i class="bulletStyle lineAbove lineBelow">2</i>
  <span class="tocText">Setup and requirements
            <br />Line 1
            <br />Line 2
            <br />Line 3
            <br />Line 4
            <br />Line 5
            <br />Line 6
        </span>
</paper-item>


<paper-item class="toc-item paper-item-0" role="option" tabindex="-1" aria-disabled="false">
  <i class="bulletStyle lineAbove lineBelow">3</i>
  <span class="tocText">foo</span>
</paper-item>



<a class="toc-item paper-item-0" role="option" tabindex="-1" aria-disabled="false">
  <i class="bulletStyle lineAbove #lineBelow">4</i>
  <span class="tocText">foo</span>
</a>

关于html - 如何在没有固定高度的情况下在 IE 11 中垂直居中文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42291900/

上一篇：javascript - 单击另一行时使表格行消失

下一篇：html - 为什么 WordPress 在我的代码中添加额外的引号？

相关文章：

internet-explorer - IE 中的边框半径不起作用

c# - 我如何在win7上通过c#修改注册表？

javascript - IE 中的 Ajax 异步 - 错误 "The Data Necessary to Complete This Operation is Not Yet Available"

html - 将图像转换为 HTML 邮件签名

javascript - 捕获 HTML map 区域点击事件的坐标(Chrome)

html - 将父 div 拉伸(stretch)到表格内容的宽度

css - 移动设备和桌面上的 img(响应式设计)

html - 将文本对齐到红色圆圈的中心，在 HTML 中其下方有一个图标

html - 如何在 HTML/CSS 中制作 3 列完全响应的图像网格？

html - 剩余零的嵌套粘性元素不粘性

©2024 IT工具网  联系我们