样式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，不同的浏览器）

回答

相关问题