Question

我有<h1>标记，其中包含一个实心的边框，但由于某种原因， border 并未完全围绕该元素。它有时发生在 IE11 上，当我重新加载网站时它（* border）表现得很奇怪，但有时看起来很好。

没有一致性，似乎是随机发生的。此外，当它确实发生时， 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;
}

Answer 1

如果通过删除网络字体解决了问题，并且只在重新加载时间歇性地发生;这可能是因为刷新时的时间不一致造成的吗？例如，有时在计算元素之前加载字体（良好的结果），有时在之后（导致边框根据IE11识别为后备字体的边界显示）。

Answer 2

请添加此课程，它将在IE中运行：）

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

尝试此操作，然后添加边框

Answer 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>

希望这有帮助

Answer 4

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

我认为这是IE近期历史上最奇怪的错误之一，并不是一个简单的挑战，我也无法在任何文档中找到它或如何正确解决这个问题。我刚才记得这个错误，因为它没有激活开发人员工具的人在制作过程中没有出现任何问题，我们就把它留下了原样。

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

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

Answer 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

Answer 7

查看Bootstrap类＆＃34; .clearfix＆＃34;

IE11边境问题

7 个答案: