<H2> 带下划线的标题 auto-width 在 IE 上

Question

#skills
{
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: fit-content;
}

<div class="box">
    <h2 id="skills">skills</h2>
    <p>Lorem Ipsum.</p>
</div>

我在一个网站上工作，我想用比带下划线 css 属性更好的方式给 h2 标题加下划线。发现一个包括添加边框底部的技巧，我现在在 auto-fitting 内容中遇到问题。

我的代码是这样组织的：

HTML 部分（我的 'box' div 是一个 flexbox）：

下划线样式很完美，但是IE不兼容...

我发现了一些类似的问题，并尝试修改为：

#skills
{
    display: table;
}

但是没用...

你能帮帮我吗？

感谢您的帮助，

杰瑞

Answer 1

我使用了 border bottom 和 float left css 希望这有帮助:)

    #skills {
    float: left;
     border-bottom: 1px solid black;
     /* This creates the border. Replace black with whatever color you want. */
    padding: 5px;
     }

    p {
      clear: both;
    }

        <div class="box">
          <h2 id="skills">skills</h2><br>
          <p>Lorem Ipsum.</p>
          <h3 id="skills">skills skills</h3>
          <p>Lorem Ipsum.</p>
          <h1 id="skills">skills skills skills</h1>
        </div>

Answer 2

如果我没理解错的话，float会如你所愿。

.skills {
  float: left;
  border-bottom: 1px solid black;
}

p {
  clear: both;
}

.box {
  overflow: auto;
}

<div class="box">
  <h2 class="skills">skills</h2>
  <p>Lorem Ipsum.</p>
</div>

<div class="box">
  <h2 class="skills">Superior skills</h2>
  <p>Lorem Ipsum.</p>
</div>

Answer 3

在你的帮助下，我解决了我的问题。正确的解决方案是像这样添加中间 div :

<div class="box">
    <div class="intermediate"><h2 id="skills">skills</h2></div>
    <p>Lorem Ipsum.</p>
</div>

然后定义为显示：table；技能元素。

因为box元素是一个flexbox，所以skills和他的父元素有相同的维度。加上一个中级div，中级div占满space，但下一个技能宽度合适

感谢您的帮助！

<H2> 带下划线的标题 auto-width 在 IE 上

<H2> Underlined title auto-width on IE

html

css

internet-explorer

underline

width