2012-02-08 6 views
6

ボタンの高さを設定しているときに問題があります。基本的に私はそれをクロスブラウザにすることはできません。 Firefoxの場合、理由は何もなく普通より高いです。ボタンの高さの不一致(クロスブラウザ)

ここでは、(この順序でのFirefox、Safariやオペラ、)スクリーンショットです:

Initial

そして、ここでコード:http://jsfiddle.net/TMUnS/2/

私も、私はにあるいくつかの特定の宣言を追加してみましたウェブが、実際に彼らはちょうど高さを少し減少し、それでも、彼らは(同じ順序で)同じではありません。

Second try

そしてここにコード:http://jsfiddle.net/TMUnS/4/

どうすればこの問題を解決できますか?

+0

これはちょうど起こり、この質問は無限に尋ねられました。入力とピクセルの完全性は、ブラウザの不一致のためほとんどの場合よく混ざりません。私はあなたが** normalize.css **のようなものから始めることを提案し、そこから調整します。 – elclanrs

+0

私は既にリセットがありますが、このようなものはリセットされていないようです。 – entropid

答えて

10

Firefoxには-moz-focus-innerという面白いことがあります。私はちょうどあなたが時々動作するようにボタンを取得するには、この操作を行う必要があることを知って、それがために何全くわからない:

button::-moz-focus-inner, 
[type="button"]::-moz-focus-inner { 
    padding:0; 
    border:0; 
} 

何が必要かもしれないと。ここで違いを見ることができます(Firefoxで):http://jsfiddle.net/TMUnS/9/

+0

実際にはこのプロパティを設定しましたが、 'padding:0'部分を追加するのを忘れてしまったので、正しく動作しませんでした。しかし、今私はあなたがここに見ることができる新しい問題があります:http://jsfiddle.net/TMUnS/12/。ボタンの高さは同じですが、Firefoxでは垂直方向ではありません。 – entropid

+0

私はあなたの問題をはっきりと見ません。 1)リンクしたばかりのデモに '-moz-focus-inner'コードが含まれていない2)あなたは' font-family'を指定していません。私は違うレンダリングので、ChromeのVS Firefoxで異なるデフォルトのフォントを取得します。 3) '

+0

私はそれが好きだと思います。先端に感謝します。 :) – entropid

0

CSSリセットを使用していますか? CSS-Resetは、ブラウザのCSSを正規化します。

このYUIのリセットを試してみてください。 YUI CSS RESET

+0

私は既にCSSリセットを使用しています:http://meyerweb.com/eric/tools/css/reset/。 – entropid

2

これは、ボタンの行の高さを制限Firefoxで設定する機能です。ボタンのデフォルトの行の高さを設定します(http://www.cssnewbie.com/input-button-line-height-bug/)。私は、ボタンの固定された高さを使用して、パディングと一緒に遊んでみるだろう。

+0

ええ、これはあなたができる最高です。テキストを垂直方向にセンタリングするための高さと線の高さが固定されています。私はテキスト入力に触れる検索ボタンでこのテクニックを使用しました。だから、すべてのブラウザで一貫して見えることが重要です。 – elclanrs

関連する問題