Question

在忽略这个问题之前，删除span元素之间的空白区域会对我有所帮助，请允许我向您保证这个问题有点不同。

问题：仅在IE11中仅在屏幕的某个宽度处出现的跨度元素之间存在非常小的间隙，由于跨度元素之间的空白，因此BTW不是问题。

代码：

          <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

的小提琴

您最初可能不会注意到这个问题，尝试重新调整小提琴的“结果”部分，您将能够识别问题。

您可以看到如下结果。

Issue

可以通过删除 style =＆＃34; text-align：center;＆＃34;

来解决此问题

上面代码中的 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好像出了问题，所以我不能提供现场演示）

IE11中span元素之间的空格

1 个答案: