html - CSS 滑动窗口圆 Angular 按钮 : how to avoid the "dead" area on right side of "window"?

Question

我一直在使用的 html/CSS 如下。

当光标在 .buttonR 上时，没有 :hover 效果，也没有在单击时正确提交。我试图绕过的右侧有一个 6 像素的死区。有什么建议么？我最初实现圆 Angular 按钮的方法是否存在缺陷？

谢谢。

    <span class="buttonR">
<input type="submit" id="updateReview" class="buttonL" value="Save changes" />
    </span>

.buttonL
{
    font-size: 18px;
    height: 26px;
    padding: 0px 0px 8px 6px;
    background-color: transparent;
    background-image: url('../Images/buttonL.gif');
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0px 0px 0px 6px;
}

.buttonR
{
    float: left;
    padding-right: 6px;
    height: 26px;
    background-color: transparent;
    background: url('../Images/buttonR.gif') no-repeat scroll top right;
    margin: 0px 6px 0px 0px;
}

更新:

所以我设法使用 zzzz 答案的变体解决了“死区”问题:

<button type="submit" class="buttonR">
  <span class="buttonL">Save Changes</span>
</button>

但对于我来说，我无法在浏览器之间获得一致的垂直对齐方式。 Chrome 和 IE 对齐，而 Firefox 将在 .buttonL 和 .buttonR 之间有 2 个像素的差异。

我听说过浏览器之间的差异，但我确信在某处有解决方法。我找不到它...该死的，这真令人沮丧。

更新 #2

在处理了一个小时的内边距和边距之后，我得到了以下结果:

Answer 1

你必须检查它是否适用于 IE 等:

<button type="submit" class="buttonR">
  <span class="buttonL">Save Changes</span>
</button>

我尽量避免使用按钮元素，但在这种情况下它可能对您有所帮助。