IE11 Border Issue

Question

Mam <h1> tag ze stałym granicy, ale z jakiegoś powodu granica nie wykracza dookoła elementu. Zdarza się to czasami na IE11, a także po przeładowaniu strony (* border) zachowuje się dziwnie, ale czasami wygląda dobrze.

Nie ma spójności i wydaje się, że dzieje się losowo. Także wtedy, gdy tak się stanie, granice zatrzymują się w różnych punktach za każdym razem i zawsze są blisko końca.

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

proszę dodać tę klasę, będzie pracować w IE :)

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

Spróbuj tego, a następnie dodaj obramowanie

Answer 2

Ponieważ nie udało mi się odtworzyć problemu, w IE 11 sugeruję zmianę sposobu zagnieżdżania elementów. Zamiast

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

pójdę do

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

nadzieję, że to pomaga

Answer 3

to prawdopodobnie dzieje się tylko wtedy, gdy narzędzia programistyczne są otwarte i testowanie lokalnie, a nawet wtedy nie regularnie. Zachowanie to można zaobserwować również w IE10, gdzie również się zdarza (nie tak często jak w IE11).

Uważam, że jest to jeden z najdziwniejszych błędów w najnowszej historii IE i nie jest to łatwe wyzwanie, ale nie znalazłem go w żadnych dokumentach ani nie obejrzałem w odpowiedni sposób. Właśnie pamiętam ten błąd z jakiegoś czasu i ponieważ nie spowodował on żadnych problemów w produkcji dla ludzi bez narzędzi programistycznych, zostawiliśmy to tak, jak było.

Chociaż z mojego zrozumienia problemu, myślę, że można go rozwiązać, tworząc element wbudowany HTML i uzyskać jego rozmiar przed załadowaniem DOM/webfont, a następnie rozpocząć interwał sprawdzania zmienionego rozmiaru elementu wstawianego HTML oraz wyzwalania i przywrócić zmianę DOM tego elementu. Daj mi znać, jeśli potrzebujesz pomocy przy tworzeniu skryptu, na wszelki wypadek, ale myślę, że nie będziesz w stanie odtworzyć tego problemu w wersji produkcyjnej, więc nie jestem pewien, czy nadal chcesz rozwiązać ten problem.

Answer 4

.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 5

Jeśli problem został rozwiązany po usunięciu czcionki internetowej i występuje tylko sporadycznie podczas ponownego ładowania; czy może to być spowodowane niespójnością w czasie podczas odświeżania? Na przykład, czasami czcionka jest ładowana przed obliczeniem elementu (dobry wynik), a czasami po (w wyniku czego ramka jest wyświetlana w oparciu o granicę tego, co IE11 określa jako czcionkę zastępczą).

Answer 6

Zrobiłem trochę badań i uważam, że to błąd w IE. Jeśli zmienisz znacznik h1 na p, to zrób czcionkę o pożądanym rozmiarze, która będzie poprawnie renderowana.

Oto strona, na której znalazłem informacje. https://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

Możesz też wypróbować ten metatag.

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

Nie mogę odtworzyć błąd, ale to otrzymał nagrodę tutaj https://superuser.com/questions/838802/ie11-renders-elements-with-border-radius-incorrectly

Answer 7

odjazdu Bootstrap klasa ".clearfix"