html - 当容器具有翻译 css 时，Fieldset 图例被击中

Question

我使用的字段集只有 bordor top。 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>

但是 fieldset 传奇正在被删除。什么问题。

Answer 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>