IE11边框问题

Question

我有一个带实心边框的 <h1> 标签，但是由于某些原因，边框 没有完全围绕元素，这在 IE11 上有时会发生，当我重新加载网站时，它(*边框) 的行为很奇怪，但有时看起来正常。

没有一致性，似乎是随机发生的。而且，当它发生时，边框 每次都停在不同的位置，并且总是靠近结尾。

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

- user3758078

---

对我来说运行良好（jsfiddle：https://jsfiddle.net/fcLtxwsc/），也许有一些其他的CSS命令导致了问题。 - user2417483

不需要调整浏览器大小，它会立即发生。 - user3758078

你的H1标签周围的HTML和CSS是什么？也许是Google字体使文本略微变大，而你的H1标签周围的容器将其隐藏了。 - crazymatt

请在此处或http://jsfiddle.net上添加带有问题的工作代码片段。 - sergdenisov

请编辑您的问题，将完整的HTML和CSS文件包含在内，删除与标题或其周围无关的任何内容。在您编辑完毕后，请从CSS文件中删除在HTML文件中未被引用的任何元素。 - toonice

Answer 1

如果通过删除网页字体解决了问题，并且只在重新加载时间歇性地出现；这可能是由于刷新时的时间不一致性引起的吗？例如，有时在计算元素之前加载字体（良好结果），有时在计算元素之后加载字体（导致边框基于IE11识别的备用字体的边界显示）。

- AndW99

---

这是我在网站上遇到的问题，原因是网络字体加载时间太长 - 大多数情况下都没问题，但如果由于某种原因加载时间超过正常时间，则会导致此类问题。 - Lyall

Answer 2

请添加此类，它在IE中有效 :)

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

尝试这样做，然后添加边框。

- CreativePS

---

我已经尝试过这个，但它并不起作用。 几乎所有的文本都被错位了，出现在页面的各个位置。 - user3758078

Answer 3

这种情况可能只会在开发人员工具打开并进行本地测试时发生，即使如此也不是经常发生。您还可以在IE10中观察到这种行为，但它发生的频率不如IE11。

我认为这是近期IE历史上最奇怪的错误之一，而且这并不是一个容易解决的挑战，我在任何文档或如何正确解决此问题的指南中都找不到此问题的提及。我只是记得以前有这个错误，并且由于没有激活开发人员工具的用户在生产中没有出现任何问题，所以我们将其保留了下来。

尽管从我对问题的理解来看，我认为可以通过创建HTML内联元素并在DOM准备好/网页字体加载完成之前获取其大小，然后启动间隔以检查更改的HTML内联元素大小并在该元素上触发和恢复DOM更改来解决此问题。如果需要脚本方面的帮助，请告诉我，但我认为您将无法在生产版本中重现此问题，因此我不确定您是否仍然有兴趣解决此问题。

- wiesion

Answer 4

请查看Bootstrap类“.clearfix”

- fieldtraveller

Answer 5

由于我无法在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>

希望这能帮到你。

- Gust van de Wal

Answer 6

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

- lyndact

Answer 7

我做了一些研究，认为这是IE的一个bug。如果你将h1标签改为p标签，然后将字体大小设置为你想要的大小，它就会正确地呈现。

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

你也可以尝试这个meta标签。

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

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

- user5125729