Chrome输入错误消息未正确定位

Question

在输入错误消息中，Chrome中的通知看起来像是设置了margin-top设置，任何想法如何解决这个问题？

这应该在第一个输入字段 http://image.prntscr.com/image/fe5cba38758c41a4acb85e86c88c3953.jpeg

在Firefox中没关系。

我正在使用Bootstrap，标记就是这个

<form role="form">

    <div class="form-group col-sm-12">
        <label for="name" class="sr-only">Your name</label>
        <input required type="text" class="form-control" id="name" name="inputName" placeholder="Name">
    </div> 

    <div class="form-group col-sm-12">
     <label for="email" class="sr-only">Your email</label>
        <input required type="email" class="form-control" id="email" name="inputEmail" placeholder="Your email"
    </div> 

    <div class="form-group col-sm-12">
        <label for="subject" class="sr-only">Subject</label>
     <input required type="text" class="form-control" id="subject" name="inputSubject" placeholder="Subject">
    </div>

</form>