html - legend tag and Chrome -


I have looked everywhere but there is no use

let me know a found in one form, which I want in every browser except Chrome. It seems that it sits outside the fields, or it moves to the top of the next element. And it is very upset

And is it an alternative solution?

P> & lt; Fieldet class = "col-12-box-bottom add-extra" & gt; & Lt; Legend class = "plus" & gt; Add promotional code & lt; / Legend & gt; & Lt; Ul id = "promo-field" & gt; & Lt; Li & gt; & Lt; Input class = "field-small" type = "text" /> & lt; / Li & gt; & Lt; Li & gt; & Lt; Button class = "but-second" type = "submit" & gt; Apply & lt; / Button & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Fieldset & gt;

CSS:

  .add-extras Legend {width: 260px; Height: 0 pixels; Border: 1px solid red; Display area; Margin-top: 10px; } .add-extras fieldset {status: relative; } .add-extras ul {padding: 0 20px 0! Important; Hidden flurry; } .add-extras li {list-style-type: none; Swim left; Margin: 0 18px 0 0; } .add-extras li: Last-baby one {color: #afafaf; Display area; Margin: 27px 0px 0 0; } Fieldset.add-extras {margin: 0 px 0 23px 0; } .add-extras label {float: none; Display area; Align text: left; Width: 110px; font-weight: bold; Margin: 0 to 5px 0; } << Code>   

This is a known problem with the legend element There is no clear action for elements of legend in WebKit Browser, but you can add margins instead of the first element of the legend instead.

In addition, you must explicitly set -webkit-margin -with-different: to work on that element properly. Try using it:

  Legend + * {-webkit-margin-top-collapse: separate; Margin-top: 10px; }   

(answer found here)

Comments