【问题标题】:Pound sign is higher then input fields in firefox?英镑符号高于Firefox中的输入字段?
【发布时间】:2014-09-25 01:16:18
【问题描述】:

这是我的 html 表单:

<form novalidate class="simple-form">
    <label>Reviews Min: <input type="number" ng-init="revNum=0" class="form-control review-input" min="0" step="10" ng-model="revNum" /></label>
    &#163;<label> Min Price: <input type="number" ng-init="minNum=0" class="form-control price-input" min="0" step="1000" ng-model="minNum" /></label>
    &#163;<label> Max Price: <input type="number" ng-init="maxNum=0" class="form-control price-input" min="0" step="1000" ng-model="maxNum" /></label>
    <label>&nbsp;<button class="btn btn-primary " style="display:block;" ng-click="updateNumArray(revNum, minNum, maxNum); updateActiveRow()">Filter</button></label>
                </form>

这里是我的 CSS

.simple-form label{
    margin-right: 10px !important;
}

.simple-form button{
    background-color: #31708f;  
}

.price-input {
    width: 150px !important;
}
.review-input{
    width: 100px !important;
}

这是 chrome 的输出:

在 Firefox 中:

如您所见,井号高于 Firefox 中的输入字段。

我该如何解决这个问题。

【问题讨论】:

  • 请分享与此表单相关的完整 CSS!
  • 因为你分享的代码,在任何浏览器上都没有问题!!!看看这个小提琴 > jsfiddle.net/pgcagx3L
  • 没有 twitter-bootstrap 的小提琴
  • 你没有在任何地方提到它使用 twitter-bootstrap!如果你能用你的代码创建一个小提琴,这将是很好的,它显示了你得到的错误。
  • @UID:我做到了。在我的标签中你可以看到twitter-bootstrapbtn btn-primary form-control 是引导类。

标签: css twitter-bootstrap firefox


【解决方案1】:

为了解决这个问题,我建议你使用我在这个DEMO上制作的代码

简单地用span 标记包裹磅符号并添加一些属性来解决问题。现在它可以在 Chrome 和 FF 中使用。

在下面添加了 CSS:

.pound {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 10px;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-03-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-03
    相关资源
    最近更新 更多