<H2> Подчеркнутый заголовок автоширина на 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>

Я работаю над веб-сайтом, на котором я хотел бы подчеркнуть заголовки h2 лучше, чем подчеркнутое свойство css. Основываясь на хитрости, которая заключалась в добавлении нижней границы, у меня возникли проблемы с авто-подгонкой контента.

Мой код был организован так:

HTML part (with my 'box 'div, который является flexbox):

Стиль подчеркивания идеален, но он не подходит для IE ...

Я нашел несколько вопросов, таких как , этот и попытался изменить, например:

#skills
{
    display: table;
}

Но это не работает ...

Не могли бы вы помочь мне?

Спасибо за помощь,

Джерри

Answer 1

Если я правильно понимаю, 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 2

С вашей помощью я решил свой вопрос. Правильным решением было добавить промежуточный div следующим образом:

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

И затем определить как display: table; элемент навыков.

Поскольку элемент box был flexbox, навыки имели то же измерение, что и его родитель. При добавлении промежуточного div, промежуточный div занимает все пространство, но следующие навыки имеют правильную ширину.

Спасибо за вашу помощь!

Answer 3

Я использовал границы снизу и поплавок влево 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>