legend tag and Chrome

Question

I\'ve looked everywhere but to no avail.

I got a

in a form, which displays as I want in every browsers, except in Chrome. It\'s like it

Answer 1

The method proposed by Stephan Muller only works if the HTML element following the is visible. As in my case, this is not always possible without potentially large restructuring of the HTML code. Thus, in addition to his CSS code

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

just apply the following jQuery command, which basically just inserts an empty div (having a height of 0 px) but now matches the CSS selector adding the margin in every case:

$('legend + *').not(':visible').each(function() {
  $('
').insertBefore($(this)); 
}