如何使该按钮图像在 Firefox 2.0 中的显示效果与在 IE7 中的显示效果相同？

Question

我有一个用于下面定义的锚链接的 CSS 文件。 这对于 IE7 来说效果很好，但是当我打开时 Firefox 中的页面按钮图像较长。

我用 Google 搜索 Firefox 是否有后台位置错误，但没有找到任何结果。

我该如何解决这个问题？

CSS 文件如下：

/* button settings */
a.RadForm_CustomSkins, a.RadForm_CustomSkins span
{
    background-image: url('FormDecorator/ButtonSprites.gif');
    background-repeat:no-repeat;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}

a.RadForm_CustomSkins.rfdInputDisabled:hover
{
    background-position: 0% 0%;
}

a.RadForm_CustomSkins .rfdInner,
a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdInner
{
    margin-right: 11px;
    margin-left: 11px;
    background-position: 0 -21px;
    color: #ffffff;
    font-size:11px;
}

a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdOuter
{
    background-position: right 0%;
}

a.RadForm_CustomSkins:hover
{
    background-position: 0 -42px;
}

a.RadForm_CustomSkins:hover .rfdInner
{
    background-position: 0 -63px;
    color: #ffffff;
}

a.RadForm_CustomSkins:hover .rfdOuter
{
    background-position: right -42px;
}
/* end of button settings */

/* clicked button styles */
a.RadForm_CustomSkins.rfdClicked
{
    background-image: url('FormDecorator/ButtonSprites.gif');
    background-position: 0 -84px;
    background-repeat: no-repeat;
}

a.RadForm_CustomSkins.rfdClicked span
{
    background-image: url('FormDecorator/ButtonSprites.gif');
}

a.RadForm_CustomSkins.rfdClicked .rfdInner
{
    background-position: 0 -105px;
    background-repeat: repeat-x;
    color: #ffffff;
}

a.RadForm_CustomSkins.rfdClicked .rfdOuter
{
    background-position: right -84px;
    background-repeat: no-repeat;
}
/* end of clicked button styles */

/* do NOT change these settings, otherwise the skinned buttons will be broken when used within a decoration zone */
a.rfdSkinnedButton.RadForm_CustomSkins
{
    -moz-user-select: none !important;
    outline: none !important;
    text-decoration: none !important;
    cursor: default !important;
    text-align: center !important;
    background-color: transparent !important;
    border: 0 !important;
    display: inline-block !important;
    background-position: 0% 0%; 
}

呈现为按钮的 HTML 为：

    <a id="_rfdSkinnedctl00_signOut" class="rfdSkinnedButton RadForm_CustomSkins" href="javascript:void(0)" style="width: 80px;">
<span class="rfdOuter">
<span class="rfdInner">Çıkış</span>
</span>
</a>
<input id="ctl00_signOut" class="rfdRealButton" type="submit" value="Çıkış" name="ctl00$signOut" _rfddecoratedid="_rfdSkinnedctl00_signOut"/>

Answer 1

如果我理解正确的话，问题是按钮的宽度在 IE 和 Firefox 中显示不同。 您可以尝试以下操作：

1. 显式设置按钮的宽度。

2. 在 Firefox 中使用 max-width 来限制按钮的宽度（除非您在 DTD 中声明“XHTML 1.0 Strict”，否则 IE7 无法理解此属性）。

3. 查看是否有任何 div/表格/其他元素影响按钮的大小。

4. 检查边距/边框/填充属性是否有影响。

5. 开始一个干净的页面并从头开始构建问题，看看是否可以重现该问题。 （上面的示例中发生了很多事情，您可能需要提炼您的想法。）