IE11 边框问题答案

【问题标题】：IE11 Border IssueIE11 边框问题
【发布时间】：2015-10-14 23:53:30
【问题描述】：

我有一个带有实心border 的<h1> 标记，但由于某种原因，border 并没有完全围绕元素。它有时会发生在 IE11 上，当我重新加载网站时，它（*border）的行为很奇怪，但有时看起来还不错。

没有一致性，它似乎是随机发生的。同样，当它确实发生时，边界每次都会在不同的点停止，并且总是接近终点。

HTML：

<h1><span style="color:#FFFFFF"><span class="highlight">LOREM</span>&nbsp;IPSUM DOLOR SIT AMET CONTETEUR</span></h1>

CSS：

.block h1 {
    border: solid 5px white;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

【问题讨论】：

对我来说很好（jsfiddle：jsfiddle.net/fcLtxwsc）也许还有其他一些导致问题的css命令。
就像我说的，这种情况并不经常发生。它每 10 次发生一次，有时或多或少。不一致。
调整浏览器大小时问题是否出现/消失？你在使用文档类型吗？哪一个？
不，浏览器不需要调整大小。它立即发生
我的问题是，当你调整它的大小时会发生这种情况吗？

标签： html css internet-explorer-11

【解决方案1】：

如果问题通过删除网络字体得到解决，并且仅在重新加载时间歇性出现；这可能是由于刷新时的时间不一致造成的吗？例如，有时字体在计算元素之前加载（效果很好），有时在计算之后（导致边框根据 IE11 识别为后备字体的边界显示）。

【讨论】：

这是我在网站上遇到的一个问题，这是因为加载网络字体的时间太长 - 大多数情况下都很好，但如果由于某种原因它需要的时间比正常时间长，那么它会导致像这样的问题。

【解决方案2】：

请添加这个类，它可以在 IE 中运行 :)

.text-element-14 h1 span{
   display:inline-block;
}

试试这个，然后添加边框

【讨论】：

我已经尝试过了，但它不起作用。它发生在整个页面上，几乎所有的文本都错位了。

【解决方案3】：

由于我无法重现该问题，因此在 IE 11 中，我建议更改嵌套元素的方式。而不是

<h1>
    <span style="color:#FFFFFF">
        <span class="highlight">LOREM</span>
        &nbsp;IPSUM DOLOR SIT AMET CONTETEUR
    </span>
</h1>

我会去

<h1 style="color:#FFFFFF">
    <span class="highlight">LOREM</span>
    &nbsp;IPSUM DOLOR SIT AMET CONTETEUR
</h1>

希望对你有帮助

【讨论】：

【解决方案4】：

这可能仅在开发人员工具打开并在本地进行测试时才会发生，即使这样也不会定期发生。您也可以在 IE10 中观察到这种行为，它也确实会发生（只是不像在 IE11 中那么频繁）。

我认为这是 IE 近期历史上最奇怪的错误之一，这并不是一个简单的挑战，我也找不到任何文档中提到它或如何正确解决此问题。我只记得前段时间的这个错误，由于它对没有激活开发人员工具的人在生产中没有任何问题，所以我们保持原样。

尽管根据我对问题的理解，我认为可以通过创建一个 HTML 内联元素并在 DOM 准备好/webfont 加载之前获取其大小，然后开始一个间隔来检查更改的 HTML 内联元素大小并触发和还原该元素上的 DOM 更改。如果您在制作脚本方面需要帮助，请告诉我，以防万一，但我认为您将无法在生产版本上重现此问题，因此我不确定您是否仍有兴趣解决此问题。

【讨论】：

【解决方案5】：

.text-element-14 h1 span {
     border: solid 5px white;
     display: inline-block;
     padding: 10px 20px 10px 20px;
     margin: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

【讨论】：

【解决方案6】：

我做了一些研究，并认为这是 IE 中的一个错误。如果您将 h1 更改为 p 标签，然后将字体设置为您希望它正确呈现的大小。

这是我找到信息的网站。 https://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

你也可以试试这个元标记。

<meta http-equiv="X-UA-Compatible" content="IE=10" />

我无法重现该错误，但这里获得了赏金 https://superuser.com/questions/838802/ie11-renders-elements-with-border-radius-incorrectly

【讨论】：

【解决方案7】：

查看引导类“.clearfix”

【讨论】：