Legendでmarginがきかない

一部のスマホでlegendのmarginがきかないことがあるらしい。
block要素を想定していないのかブラウザで特殊なスタイルをあてるためかそのあたりが影響している気がする。

手元ではAQUOS PHONE SHL22（Android 4.2.2）の標準ブラウザで再現。
marginを指定してもlegendの次の要素とピッタリくっついてしまっていた。

対処

アスタリスクはできれば使いたくないが、やむを得ず参考と同じように対処。

HTML

<fieldset>
  <legend class="form-title">
    タイトル
  </legend>
  <input class="form-text" type="text" name="form-text">
</fieldset>

CSS

.form-title + * {
    -webkit-margin-top-collapse : separate;
    margin-top                  : $margin;
}

参考

Getting Webkit to pay attention to margins [duplicate]
http://stackoverflow.com/questions/6063071/getting-webkit-to-pay-attention-to-legend-margins

Cannot add margin to Legend element in Safari & Chrome
http://stackoverflow.com/questions/2568591/cannot-add-margin-to-legend-element-in-safari-chrome

legendはFirefoxやwebkit系でdisplayを変更できない
http://webdev.jp.net/legend-css-display/