为什么Firefox中的输入文本是微观的？答案

【问题标题】：Why is the input text in Firefox microscopic?为什么Firefox中的输入文本是微观的？
【发布时间】：2014-12-08 17:00:42
【问题描述】：

我正在处理site，并且有一个可以正常工作的 Google CSE 输入，但输入字段文本在 Firefox 中无法正确显示。在 Chrome 和 Safari 中看起来不错。但在FF中绝对是微观的。输入框位于页面右上角。

代码如下：

<form action="http://dev.rouviere.com/search-results/" id="cse-search-box">
  <div>
    <label for="q">search</label>
    <input type="hidden" name="cx" value="017425724926122041548:nrhzbynfo9u" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" id="q" autocomplete="on" size="31" style="font-size: 13px; color:#797979;" />
  </div>
</form>

这是 CSS：

form input#q { 
    height: 20px !important;
    font-size: 13px !important; 
    color: #797979; 
    float: right;
    margin-top: 5px;
}

注意内联样式。因为 Google 应用了一些样式，而我的 css 样式没有效果，所以我也添加了内联样式。

【问题讨论】：

这听起来很愚蠢，但是您的浏览器是否放大了？
没有问题是愚蠢的，但不，它没有放大。

标签： html forms firefox google-custom-search

【解决方案1】：

它不是呈现微观，它被您的填充/输入高度隐藏。

如果您更改以下规则，它应该可以工作：

input#q {
  height: 25px !important;
  ...
}

form input {
  padding: 5px 2% !important;
  ...
}

虽然我建议重组你的 CSS 以避免在任何地方都使用 !important 并且更具体地说明你试图在规则中选择的内容。

【讨论】：