Легенда набора полей вычеркивается, когда в контейнере есть translate css

#html #css

#HTML #css

Вопрос:

Я использую набор полей только с верхней границей. Контейнер fieldset имеет абсолютную позицию и имеет свойство translate для выравнивания модального по центру страницы. См. https://jsfiddle.net/wb8ddv0w/1 /

 <section class="modal  medium  someclass" >
<fieldset>
<legend>Some heading</legend>
    <p>Some text on the top. Some text on the top Some text on the topSome text on the topSome text on the topSome text on the topSome text on the topSome text on the top</p>
   <section  aria-required="true">
      <label>some more text</label>
   </section>
</fieldset>
</section>

Но легенда набора полей вычеркивается. В чем проблема.

Ответ №1:

Использование долей пикселя обычно создает проблемы

Просто сделайте padding-top целочисленным значением, и все работает нормально

 fieldset {
      margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    border-top: 1px solid red;
    margin-top: 51px;
    padding-top: 25px;   /* changed */
    position: relative;
}
legend {
    font-size: 1.4rem;
    padding: 0 12px 0 8px;
    text-transform: capitalize;
}
.modal {
    position: absolute;
    top: 40px;
    bottom: 40px;
    right: 40px;
    left: 40px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 16px #111;
    margin: 0 auto;
    opacity: 1!important;
    display: block;
}
.modal.someclass {
    bottom: auto;
    top: 50%;
    left: 50%;
    /* -webkit-transform: translate(-50%,-50%); */
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

 <section class="modal  medium  someclass" >
<fieldset>
    <legend>Some heading</legend>
        <p>Some text on the top. Some text on the top Some text on the topSome text on the topSome text on the topSome text on the topSome text on the topSome text on the top</p>
<section  aria-required="true">
<label>some more text</label>
</section>
</fieldset>
</section>

Ответ №2:

используйте {float:left;width:100%} on legend , я также удалил margin-top из fieldset , но вы можете сохранить его, если хотите.

дайте мне знать, если это то, что вы ищете

 fieldset {
      margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    border-top: 1px solid red;
  
    padding-top: 25.5px;
    clear: both;
    position: relative;
}
legend {
    font-size: 1.4rem;
    padding: 0 12px 0 8px;
    text-transform: capitalize;
    float:left;
    width:100%;
    box-sizing:border-box;
}
.modal {
    position: absolute;
    top: 40px;
    bottom: 40px;
    right: 40px;
    left: 40px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 16px #111;
    margin: 0 auto;
    opacity: 1!important;
    display: block;
}
.modal.someclass {
    bottom: auto;
    top: 50%;
    left: 50%;
    /* -webkit-transform: translate(-50%,-50%); */
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
p ,label  {  float:left;
    width:100%;}

 <section class="modal  medium  someclass" >
<fieldset>
    <legend>Some heading</legend>
        <p>Some text on the top. Some text on the top Some text on the topSome text on the topSome text on the topSome text on the topSome text on the topSome text on the top</p>
<section  aria-required="true">
<label>some more text</label>
</section>
</fieldset>
</section>