Css按钮滑动门

我试图用css的“滑动门”技术设计一个按钮，但它不能正常工作。我目前只能访问Firefox3，所以这个问题可能不会在其他浏览器中出现，但我也想为firefox解决这个问题

下面是问题所在的图片：

正如你所看到的，第二个面比第一个面低一个像素，而且还不够向右。以下是我正在使用的代码：

button
{
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button span
{
    display: block;
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}


<a href="http://localhost"><button class="important" type="button"><span>Register</span></button></a>
<button type="submit"><span>Submit</span></button>

按钮
{
字体大小：粗体；
边界：无；
背景：左上角的url（../images/blue_button_left.gif）不重复#24AADF；
颜色：#FFFFFF；
高度：25px；
}
按钮跨度
{
显示：块；
高度：25px；
背景：右上角url（../images/blue\u button\u right.gif）不重复；
位置：相对位置；
}
提交

如何解决此问题？我尝试使用top:-1px right:-3px相对定位跨距，但是文本没有对齐

谢谢。

---

我只是在一个div背景上做了滑动门，这个站点的代码工作得非常好。

表单元素（如按钮）总是很难设计，并且充满了这样的小错误

与其将类应用于button元素本身，不如尝试将button的样式应用于实际button中的额外span元素

简言之：

button {
background: white;
border: 0;
}

button div {
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button div div {
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}

和HTML：

<button type="submit"><div><div>Submit</div></div></button>

提交

尝试将按钮的填充设置为零，然后使用左边的填充和宽度将文本放置在正确的位置

button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }

如果查看HTML块显示：填充被添加到对象的总宽度，背景从填充区域开始，右半部分被填充

---

但是请注意，按钮元素不适合嵌入内部的任何其他节点（如span）。它们在浏览器中可以正常工作，但IE会让你的生活变得非常艰难（更不用说，据我所知，它是无效的）

我使用div而不是按钮，并且有一个功能来构建它们。结果是这样的：

内联脚本调用：

<script type='text/javascript'>makeButton("Log in","login()")</script>

---

它实际上需要是一个按钮标签，因为它需要提交一个表单。为什么不使用它并通过javascript对表单进行sumbit？只需获取代码并根据需要进行更改即可。我使用了一个div类而不是一个，而且它很有效。我认为你的问题在于填充物。您需要将适当的左边填充和右边填充设置为较小图像的大小。或者按照@Vnuk所说的去做。@Vnuk:如果用户关闭了javascript怎么办？你明白了吗，或者把a改成a按钮不起作用了吗？（我对按钮的样式设计没有太多经验）啊，它工作得很好。毫无疑问，IE中会有漏洞，我真的不在乎额外的标记，但它是有效的：）如果我没有得到更好的答复，我会接受你的回答。Abbylaritz方法也可能有效，但这需要Javascript实际提交表单。如果用户禁用了JS，您仍然需要一个回退方法。我认为我建议的方法可能是一个更好的选择，因为你的愿望非常简单（按钮框中没有透明度）。更少的脚本编写，更少出错。按钮标签中的元素实际上是有效的，但不是标签中的元素。很抱歉，您的解决方案无效，填充已设置为零。此外，它需要是一个动态大小的按钮，而不是固定的宽度。但是谢谢你的努力

function makeButton(text,action) {      
    document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}

a.titleGen, .btnText, .btnGText {
    text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
    text-decoration:none
}

.btn {
    height:22px;
    display:inline;
    cursor:pointer;
    margin-right:5px;
}
.btnLeft {
    background-image:url(/images/bg_btnLeft.gif);
    width:3px;
    height:22px;
    float:left;
}
.btnRight {
    background-image:url(/images/bg_btnRight.gif);
    width:5px;
    height:22px;
    float:left;
}
.btnMiddle {
    background-image:url(/images/bg_btnMiddle.gif);
    width:auto;
    height:22px;
    float:left;
}
.btnText {
    color:#ffffff;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top:2px;
    padding-left:10px;
    padding-right:10px;
}