Space 在 IE11 中的 span 元素之间

Question

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

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

代码：

          <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;
}

这是相同的 jsfiddle

的 fiddle

一开始您可能没有注意到这个问题，尝试重新调整 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)

Space 在 IE11 中的 span 元素之间

Space between span elements in IE11

html

css

internet-explorer