css - 滑动门 CSS、按钮标签和 IE8

Question

我正在做一个元素来升级系统以使用按钮标签而不是常规的提交按钮。对于按钮的格式，我有以下 CSS 类:

    button::-moz-focus-inner {
      border: none;  /* overrides extra padding in Firefox */
    }

    button {
      background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
      color: #FFFFFF;
      display: block;
      font: normal 12px arial, sans-serif;
      height: 25px;
      padding-right: 8px; /* sliding doors padding */
      padding-top: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin: 0px;
      text-decoration: none;
      border: 0px;
      overflow: visible;
    }
    #loginbox button {
      float: right;
    }
    button span {
      background: transparent url('images/greenleftbutton.png') no-repeat top left;
      display: block;
      line-height: 18px;
      padding: 4px 5px 5px 12px;
      margin: 0px;
      border: 0px;
    }

它们在除 IE8 之外的所有浏览器中都绝对完美地工作。

在 IE8 中，这些按钮在大多数地方都有效，但后来我发现一个页面，其中两个背景图像没有完全对齐，并且没有调整填充、行间距等修复它。

有人知道为什么会这样吗？

演示页面:http://test6.placement.co.uk/demo/test.asp

---更新---

经过一些相当广泛的测试和尝试之后，我现在已经很清楚是什么导致了第 1 页中的问题，但不知道如何解决它，而具有相同问题的另一个页面有完全不同的原因(我还没有找到)但是我偶然发现了一个修复...

首页上的问题似乎与页面上方输入的 ul 有关。把它去掉，一切正常——不幸的是，这不是一个选项，因为 ul 是用户输入内容的一部分，所以我对此感到困惑。特别给出...

第 2 页没有导致问题的 uls，但在我的按钮代码之前随机粘贴两个 break 标签可以解决问题。

当然，该修复程序在第 1 页上不起作用。

我正准备屈服并找到一些替代方法来呈现这些按钮，因为无论实际问题是什么，它显然在我的 CSS 或我的基本 HTML 中如此深入，以至于我可能永远找不到

Answer 1

我看不出 IE8 和其他浏览器有什么区别。您能否更清楚地说明您想做什么？