html - Firefox のレンダリング メニュー イメージが正しくない

Question

こんにちは。私が抱えている問題について誰かが何か洞察を提供できるかどうか疑問に思っていました。当初は Chrome の問題でしたが、現在は Firefox の問題であることが修正されています。

次の左のメニュー画像をご覧ください。Firefox でレンダリングすると、何らかの理由で「go」ボタンが下に表示されます。これは他のブラウザでは発生しません。

Firefox での表示:

Firefox メニュー http://desmond.imageshack.us/Himg254/scaled.php?server=254&filename=20212630.jpg&res=landing

HTMLとCSSはこちら

Firefox 14.0.1 を使用しています

Answer 1

これをスタイルシートに含めます。

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

問題は、Firefox がボタンと入力の内部にデフォルトのパディングを配置することです。検索要素は特定の幅を想定しているため、その小さなパディングで台無しになります。

上記のコードは、そのパディングを削除します。これは、多くのリセット スタイルシートで共通の「コード」です。