在 Firefox 中显示内联对我不起作用

Question

我在 Html:

            <div class="login">
            <form class="form-horizontal signin">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email : </label>
                    <div class="col-sm-5 more">
                        <input type="email" class="form-control top" id="emailLogin" placeholder="Email" size="100">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password : </label>
                    <div class="col-sm-5 passLog">
                        <input type="password" class="form-control" id="passwordLogin" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                </div>
            </form>
        </div>

我在 jquery 中有这段代码：

$(".signin").submit(function(){
    $('.error').remove();
    var hasError = false;
    if($.trim($("#emailLogin").val())=="")
    {
        $(".more").append('<span class="glyphicon glyphicon-remove error" role="alert"></span>');
        hasError = true;
    }
    if($.trim($("#passwordLogin").val())=="")
    {
        $(".passLog").append('<span class="glyphicon glyphicon-remove error" role="alert"></span>');
        hasError = true;
    }
    if(hasError == true)
        return false;
    else
        return true;
});

span 显示块结构 我要显示什么是内联结构

在css中需要解决的是：

display:inline;

在 chrome 中工作，但不能在 Firefox 中工作

Answer 1

根据您的 sn-p 中的类名，您正在使用 Bootstrap。

您还尝试添加一个图标来指示某些验证状态。

好消息是这已经内置在 Bootstrap 框架中：

http://getbootstrap.com/css/#forms-control-validation

您需要在代码中添加一些额外的 Bootstrap 类名称，如下所示。

1. 在您使用 jQuery 添加到 DOM 的 span 中，添加类名 form-control-feedback。

2. 在.form-group 块中，添加类has-error has-feedback

3. 确保id 值与连接标签和输入字段的for 属性中的相应值匹配

$(".signin").submit(function(){
    $('.error').remove();
    var hasError = false;
    if($.trim($("#emailLogin").val())=="")
    {
        $(".more").append('<span class="glyphicon glyphicon-remove error form-control-feedback" role="alert"></span>');
        hasError = true;
    }
    if($.trim($("#passwordLogin").val())=="")
    {
        $(".passLog").append('<span class="glyphicon glyphicon-remove error form-control-feedback" role="alert"></span>');
        hasError = true;
    }
    if(hasError == true)
        return false;
    else
        return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<div class="login">
  <form class="form-horizontal signin">
    <div class="form-group has-error has-feedback">
      <label for="emailLogin" class="col-sm-2 control-label">Email :</label>
      <div class="col-sm-5 more">
        <input type="email" class="form-control" id="emailLogin" placeholder="Email">
      </div>
    </div>
    <div class="form-group has-error has-feedback">
      <label for="passwordLogin" class="col-sm-2 control-label">Password :</label>
      <div class="col-sm-5 passLog">
        <input type="password" class="form-control" id="passwordLogin" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>
</div>

Answer 2

只需添加以下内容

 display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;

而不是

display:inline;

更多参考：Cross-Browser Inline-Block

Answer 3

width:90%;
display:-moz-inline-stack;