当容器翻译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>

但是场地传奇正在罢工。问题是什么。

Answer 1

使用像素的分数通常会产生问题

只需将padding-top设为整数值即可正常

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在{float:left;width:100%}上使用legend， 我还从margin-top删除了fieldset，但如果您愿意，也可以保留。{/ p>

让我知道这是否是您正在寻找的

＆＃13;

＆＃13;

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%;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;