IE11邊境問題

Question

我有一個帶有實線邊框的<h1>標簽，但由於某種原因， 邊框並沒有完全圍繞元素。 它有時會發生在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;
}

Answer 1

如果通過刪除Web字體解決了問題，並且只在重新加載時間歇性地發生; 這可能是因為刷新時的時間不一致造成的嗎？ 例如，有時在計算元素之前加載字體（好結果），有時在加之后（導致邊框根據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更改在那個元素上。 如果您需要幫助制作腳本，請告訴我，以防萬一，但我認為您無法在生產版本上重現此問題，所以我不確定您是否仍然有興趣解決這個問題。

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更改為ap標記，則將字體設置為您希望它正確呈現的大小。

這是我找到信息的網站。 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類“.clearfix”