Html IE和Firefox中的按钮大小不相等

我的jsp页面上只有几个按钮，我使用的样式如下：

*.buttonblue {
    background-color: #003366;
    border-color: #99CCFF;
    color: #FFFFFF;
    font-family: Verdana,Arial,Helvetica;
    font-size: 8pt;
    font-weight: bold;
    height: 20px; 
    display:inline;
    line-height: 1.2;
    text-align: center; 
         margin-top: 2px; 
}*

在Firefox中，按钮比IE6小一点。 我无法定义按钮的大小，因为标题会更改，按钮大小也会相应更改

我尝试了宽度：自动，但没有成功。此外，在溢出：可见的情况下，IE中的按钮变得更小

请帮助。

，您可能正在经历这种情况。试着这样做：

input.button {
    padding: 0 .25em;
    width: 0;  /* IE table-cell margin fix */
    overflow: visible;
}

input.button[class] {  /* IE ignores [class] */
    width: auto;  /* cancel margin fix for other browsers */
}

---

注意：如果您的按钮在应用此修复后在IE中变得更小，请确保您没有处于怪癖模式。在IE的“怪癖”模式中，对象的宽度的计算方式与标准模式不同，使所有内容都稍微小一些（对于具有指定宽度的项目）。如果希望获得一致的跨浏览器结果，最好始终使用标准模式（即使IE的标准模式不是很好，但它仍然比怪癖模式更标准）。

无论浏览器如何决定，都会呈现一个按钮。如果您希望图像在所有浏览器中看起来都一样，则需要使用图像并将其设置为像按钮一样工作。

或者使用：

例：

---

---

现在您可以相应地调整它们了

当然，未设置样式的按钮的特定外观是特定于浏览器或平台的，但是按钮的宽度应该由页面设计器控制，并且对于任何人关心的浏览器来说都是如此。如果设置按钮的样式使默认样式不再使用，那么您甚至可以在没有图像的所有浏览器上使其相同。我目前维护的网站都是这样做的，而且效果很好。我们只需要为IE6的bug添加一些CSS补丁。非常感谢大家。最后，我从你所有的评论中得到了一个组合，它很有效。。。。哇哇！！我这样使用：#宽度：0；溢出：可见；我们可以忽略宽度：自动，因为默认情况下FF将使用它。再次非常感谢：）：）我现在看到了另一个问题。IE中按钮的大小不小于FF。我加了#宽度：0；溢出：可见；在IE中，按钮标题在左右两侧紧密对齐，如“提交”，而在FF中，左右两侧有一些空格，如“提交”（参见空格）。我试着用align:center；在css中，但不起作用。@thecoshman:我看到一些offsetWidth是在FF中设置的。这会在按钮上显示的文本前后产生额外的空间。我们可以为IE设置偏移网络宽度吗？Anurag bit与这个问题脱节。因此，这可能是一个相当随机的评论，但你可能想看看CSS的“重置”表。所有的浏览器都喜欢将他们的“天赋”添加到“标准”页面中，比如chrome喜欢在聚焦的表单元素中添加亮点。它们99%都是基于CSS的，因此您可以覆盖它们。例如，它可以帮助您在最顶端设置一些CSS规则，将所有边距和填充重置为0。读了这篇文章，你很快就会明白我在说什么。我总是在我的应用程序中添加YUIReset/Base/font（）作为CSS的第一行。它有助于解决这样多的问题，（希望）为所有浏览器提供一个基线基础，以便使您所做的CSS更改一致地应用。他们会为你服务，但实际上，你可以在现有样式页面的顶部添加几行。不同的Bowser样式有什么关系？你，开发人员，是唯一一个可能在不同浏览器中查看站点的人。重要的是，它看起来都很好；它不一定要看起来一样。@TRiG:的确，它们不一定要看起来一样，但通常是客户要求的，有时设计过于拥挤，以至于按钮大小很重要。在IE填充错误的情况下（如果这是问题所在，没有完整的示例代码无法确定），按钮实际上可能看起来大得可笑，这取决于涉及的文本量。Anurag，我应该鼓励你接受一个你认为适合你的问题的答案。就我个人而言，我尝试过“闪亮先生和新”的答案，它对很多美沙克人都非常有效。最后，我从你所有的评论中得到了一个组合，它很有效。。。。哇哇！！我是这样使用的：宽度：自动#宽度：0；溢出：可见@Anurag嘿，如果这个答案确实对你有帮助，你应该通过点击旁边的绿色复选框来选择它作为最佳答案。只是一个友好的建议，仅此而已。我现在看到另一个问题。IE中按钮的大小不小于FF。我加了#宽度：0；溢出：可见；在IE中，按钮标题在左右两侧紧密对齐，如“提交”，而在FF中，左右两侧有一些空格，如“提交”（参见空格）。我试着用align:center；在css中，但不起作用。@Anurag没有任何实时演示或代码，没有人可以推测或猜测真正的问题是什么。这是我现在看到的另一个问题。IE中按钮的大小不小于FF。我加了#宽度：0；溢出：可见；在IE中，按钮标题在左右两侧紧密对齐，如“提交”，而在FF中，左右两侧有一些空格，如“提交”（参见空格）。我试着用align:center；在css中，但不起作用。@Anurag:如果你有新问题，请问一个新问题。并包括一个演示问题的简短代码示例，包括HTML。@Shiny先生和New:我正在使用下面的按钮样式。按钮蓝色{背景色：#003366；边框颜色：#99CCFF；颜色：#FFFFFF；字体系列：Verdana、Arial、Helvetica；字体大小：8pt；字体重量：粗体；高度：20px；线条高度：1.2；文本对齐：中心；页边距顶部：2px；#宽度：0；溢出：可见；}因此我看到偏移宽度比宽度大16px，因此，在FF中，我看到按钮大小略大，左右两侧都有空格。看起来与此页上的“添加注释”按钮类似。@Anurag:看起来您可能需要指定按钮上的填充以保持一致的外观。谢谢。这正是我想要的答案

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

    .buttonblue { 
background-color: #003366; 
border-color: #99CCFF; 
color: #FFFFFF; 
font-family: Verdana,Arial,Helvetica; 
font-size: 8pt; 
font-weight: bold; 
height: 20px; 
display:inline; 
line-height: 1.2;
text-align: center; 
margin-top: 2px; 
width: 100px; /* Read by FF */
#width:100px; /* Read by IE*/
}