當容器翻譯css時，Fieldset圖例會變爲striked

我只在bordor頂部使用字段集。 fieldset的容器是絕對位置，並具有翻譯屬性以將模式對齊到頁面中心。見https://jsfiddle.net/wb8ddv0w/1/當容器翻譯css時，Fieldset圖例會變爲striked

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

但字段集傳說是通過越來越罷工。什麼是問題。

來源

2016-10-03 user1853803

從fieldset中刪除margin-top並將填充填充到.modal –

Fieldset css是通用的，不能更改。 – user1853803

-1

使用{float:left;width:100%}上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>

來源

2016-10-03 07:28:10

我也需要邊框。 – user1853803

你沒看到頂部的紅色邊框嗎？有一個邊界。不需要-1 –

使用分數的像素通常會產生問題

只是要填充機頂的整數值，它工作正常

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>

來源

2016-10-03 16:45:59 vals

當容器翻譯css時，Fieldset圖例會變爲striked

回答

相關問題