樣式HTML提交按鈕（CSS，不同的瀏覽器）

我想樣式提交按鈕，似乎在不同的瀏覽器中呈現不同的提升按鈕。樣式HTML提交按鈕（CSS，不同的瀏覽器）

<p id="lineInput"> 
    <label for="task">Add a Task</label> 
    <input type="text" name="task" id="task" /> 
    <input type="submit" id="btnSubmit" value="Add" /> 
</p> 

#lineInput { 
    ...

position：relative; margin：0px; }

#btnSubmit { 
    ... 
    padding: 6px 8px; 
    margin: 0; 
    font: 1em/1em Hetilica; 
    position: absolute; 
    right: 2px; 
    top: 3px; 
}

alt text

通知Add按鈕過低的鑲邊時#btnSubmit有bottom: 3px。如果固定在鍍鉻與bottom: 5px但在Firefox中的問題將是太高

來源

2010-06-05 Jiew Meng

是不是'em'瀏覽器/平臺depedant單位？如果使用像素來改變文字大小，會發生什麼？ – zneak 2010-06-05 03:30:42

我正在嘗試定位文本不改變大小......哦，你在鉻看起來更小！ thx ...我試圖使用px的大小不似乎太...我認爲theres一些默認瀏覽器填充？ – 2010-06-05 03:42:57

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ :) – edl 2010-06-05 04:12:04

嘗試的插件給你的CSS文件的頂部：

*{ 
margin:0; 
padding:0; 
}

這樣，你可以測試是否有一些默認的瀏覽器填充/不使用一些大的CSS復位啄保證金問題...

我可以告訴你的是，我認爲這個問題是你包裹在<p></p>具有默認10px的底部和頂部填充所以也許嘗試正在重置該在你的CSS中爲0。

#lineInput{ 
padding:0; 
}

或者只是將該段更改爲div。

也許這是解決方案，但也許它不是，因爲你使用的絕對定位...

我已經算對PX的和字母在圖片的兩個部分是15像素。在下面的Firefox中，橙色部分末尾的字母是11px，鉻中是8px。在從字母頂部到橙色部分開頭的firefox中，有12px，鉻中有10px。所以這是5px的差異。

試試這個：

#btnSubmit{ 
height:38px; 
padding:0; 
}

這將使該按鈕是38px高和信件將在按鈕的左上方。然後你可以添加也許這個：

text-align:center; 
padding-top:10px; // or how much is needed to be verticaly centered.

來源

2010-06-05 11:37:57 Gavrisimo

樣式HTML提交按鈕（CSS，不同的瀏覽器）

回答

相關問題