Ce blog (un peu ennuyeux, page là) (et ce n'est pas mon blog en passant) décrit un étrange bug que j'ai rencontré hier dans Internet Explorer 8 seulement. Le bug consiste .EOT polices web et <iframe> - éléments.
Je n'ai pas fait des recherches approfondies sur le déclencheur exacte pour le bug, mais c'est essentiellement le cas où une page à l'aide d'une police web qui charge le contenu dans un <iframe> tels que le cadre aussi utilise une police web devient "illisible" par le navigateur. Alors OK le texte rendu avec le web de police se déplace brusquement de terribles-à la recherche Arial ou quelque chose d'autre, tri de la sur son propre. Parfois, il retourne en arrière, seulement à se dégrader à nouveau au hasard sur les interactions de l'utilisateur comme la souris se déplace.
Ce billet de blog est un exemple. Pour clarifier, c'est le contenant de la page qui se foiré, pas de la page dans l' <iframe> (au moins, c'est le cas jusqu'à présent dans mon expérience).
Personne n'a trouvé une meilleure solution que ce qui est suggéré dans ce blog, qui est à la force d'un "reload" de la CSS, <link> élément d'où l' @font-face déclarations venir? (Je pourrais le faire mais ce serait une douleur mineure, et en plus il allait me forcer à bouger ma police d'installation de mon document <head> qui si je me souviens est un problème de performances; je vais devoir scrounge autour et trouver que friandise à nouveau.)
edition — mise à jour
OK , voici une page de test. Voici les principales (conteneur) page:
<!DOCTYPE html>
<html>
<head>
<style id='font_style'>
@font-face {
font-family: 'bold-display';
src: url('DejaVuSans-Bold.eot');
}
</style>
<style>
.fancy { font-family: bold-display, "franklin gothic medium", "verdana", sans-serif; font-size: 32px; }
iframe { width: 500px; height: 200px; }
#floater {
position: absolute;
top: 100px; left: 100px;
display: none;
}
#floater.showing {
display: block;
}
</style>
<script>
function load() {
var frame = document.createElement('iframe'),
floater = document.getElementById('floater'),
target = document.getElementById('target');
frame.src = 'frame.html';
target.appendChild(frame);
floater.className += 'showing';
}
function unload() {
var floater = document.getElementById('floater'),
target = document.getElementById('target');
target.innerHTML = '';
floater.className = floater.className.replace(/\bshowing\b/g, '');
}
</script>
</head>
<body>
<div class='fancy'>Hello World</div>
<button type='button' onclick='load()'>Click Me</button>
<div id='floater'>
<div id='target'></div>
<button type='button' onclick='unload()'>Close</button>
</body>
</html>
La page de cadre a même @font-face et un message fictif.
Le problème semble avoir quelque chose à faire avec l'aide du chargé de polices avec une liste de plus d'un suppléant de la police. J' (sans raison valable) avait jeté dans un couple de similaire plus-polices courantes dans mon "font-family" valeurs". Quand j'ai laissé tomber en arrière pour:
.title { font-family: bold-display, sans-serif; }
ensuite, le problème a disparu (ou au moins, il semble avoir disparu à ce jour).
Merci à ceux qui ont aidé. À @albert, ajouter une réponse résumant ce que vous avez essayé et je vais upvote vous :-)
