html - IE11中span元素之间的空间

Question

在您忽略这个问题(因为删除跨度元素之间的空白会对我有所帮助)之前，让我向您保证这个特定问题有点不同。

问题:span 元素之间的间隙非常小，仅在 IE11 中仅在屏幕的特定宽度下出现，顺便说一句，由于 span 元素之间的空白，这不是问题。

代码:

          <table width="100%" height="50" cellspacing="0" cellpadding="0">
              <tbody>
                 <tr height="15">
                    <td nowrap="nowrap" style="text-align: center;">
                        <button >
                       <span class="buttonLeft"></span><span class="buttonMiddle"><span class="buttonText" >Reset Page</span></span><span class="buttonRight"></span>  
                       </button>
                    </td>
                 </tr>
              </tbody>
           </table>

代码:

button {
    background: none;
    border:none;
}
.buttonLeft, .buttonMiddle, .buttonRight {
    background-color: #23609D;
    height: 20px;
    vertical-align: middle;
    padding-top: 2px;
    height: 22px;
    display: block;
    float: left;
}
.buttonRight, .buttonLeft {
    width: 10px;
}
.buttonLeft {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.buttonRight {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.buttonText {
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: block;
    margin-top: 2px;
}

这是相同的 fiddle jsfiddle

您一开始可能没有注意到这个问题，尝试重新调整 fiddle 结果部分的大小，您将能够识别问题。

您可以看到如下结果。

可以通过删除 style="text-align: center;" 来解决该问题

在上述代码中的 td 元素上或通过删除 border-radius 样式。

由于我的元素中的许多地方都使用相同的标记，因此我真的不认为更改标记是最好的解决方法。

我正在寻找 CSS 解决方案，或者如果不是解决方案，至少要找出这种奇怪行为背后的原因。

Answer 1

我只是为左右 SPAN 添加 1px 的负边距:

span.buttonLeft {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-right:-1px;
}
span.buttonRight {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-left:-1px;
}

并在 .buttonText 跨度中添加填充，以便在文本周围留出 1px 的空间:

span.buttonText {
    display: block;
    margin-top: 2px;
    padding:0 1px;
}

这个解决方案是有效的，即使它不是一个干净的方法。这里会发生什么？ 2 个 SPAN 重叠在中间一个 (1px) 上。

(抱歉，JSFiddle 似乎出了问题，所以我无法提供现场 Demo)