コンテナの翻訳時にフィールドセットの凡例が翻訳されました

Question

私はbordorトップのみのフィールドセットを使用しています。フィールドセットのコンテナは絶対位置であり、モーダルをページの中心に揃えるために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> 

を参照してくださいしかし、フィールドセットの伝説は、裏抜けを得ています。どうした。 legend上

Answer 1

使用{float:left;width:100%}、 は私もfieldsetからmargin-topを削除していますがたい場合は、それを維持することができます。

ジャストパディングトップに整数値を作る通常の問題

を作成し、これはあなたが

ピクセルの画分を使用して

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>

Answer 2

探しているものであれば、私は知っているとそれは正常に動作します

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>