Есть ли способ обернуть div вокруг текстового ввода / текстового поля во всех браузерах?

Question

Я пробую это css:

.twrap {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 1px solid red;
    margin: 0 0 26px 0;
}

И использую его в html вот так:

     <div class="twrap">
      <input type="text" id="textline" name="textline" value="some text">
     </div>

И ...

     <div class="twrap">
      <textarea id="textbox" name="textbox">some other text</textarea>
     </div>

Это работает почти правильно по желанию, но не всегда во всех браузерах. Кажется, что он работает правильно для всех полей input type="text", но есть несоответствие для работы с полями textarea. В некоторых браузерах он имеет видимое пространство в 4 пикселя только внизу. Верхняя, левая и правая стороны согласованы по желанию. к непредсказуемым ответам и мрачным рекомендациям никогда не делать этого.

Я также пытался нормализовать css, но это не имело никакого значения. Есть ли у кого-нибудь способ надежно добиться этого?

Я создал скрипку здесь https://jsfiddle.net/ogqaL62p/, чтобы ее можно было легко просматривать в разных браузерах.

Answer 1

Я использовал flex вместо встроенного блока отображения и дал ему оболочку фиксированной ширины. Таким образом, текстовое поле в нем будет сохранять свою ширину во всех случаях.

.twrap {
  position: relative;
  display: flex;
  padding: 0;
  border: 1px solid red;
  margin: 0 0 26px 0;
  width: 300px;
}

textarea {
  width: 100%;
  height: 100px;
}

input[type='text'] {
  width: 300px;
  height: 40px;
}

<div class="twrap">
  <textarea id="textbox" name="textbox">some other text</textarea>
</div>

<br>

<div class="twrap">
  <input type="text" id="textline" name="textline" value="some text">
</div>