tl; dr Die obige Verbindung ist ein schnelles Beispiel für das weiter unten beschriebene Problem. Klicken Sie auf die li: s, um sie zu entfernen, und sehen Sie den Rendering-Fehler in IE9 oder IE10.
In einer App, die mein Team erstellt, haben wir eine Box für Suchergebnisse, deren Höhe sich je nach Anzahl der Übereinstimmungen ändert. Auf das Element wird ein Box-Schatten angewendet. Das Problem ist in IE9 und IE10, wenn die Box kleiner wird. Es scheint, als würde der IE den Box-Schatten "vergessen" und nur den inneren Teil des Elements neu rendern. Der Box-Schatten wird immer noch am unteren Rand des skalierten Elements gerendert, aber eine Kopie des Schattens bleibt normalerweise dort, wo er gerendert wurde, bevor die Größe des Elements geändert wurde.
Wenn es irgendeinen Weg gibt, um dies zu umgehen, würde jede Information am meisten geschätzt werden.
(Mir ist klar, dass diese Antwort etwas spät ist, aber ich denke, dass es sich lohnt, eine funktionierende Lösung / Workaround zu dokumentieren.)
Ich hatte kürzlich ein ähnliches Problem. Die Lösungen scheinen ein zusätzliches <div> Tag unter dem mit dem Box Shadow hinzuzufügen. Stellen Sie sicher, dass zwischen diesen beiden <div> s kein Abstand besteht und dass die Höhe mindestens so hoch wie die Höhe des unteren und die Breite so breit wie der Schatten ist. Dies schien IE zu zwingen, den Bereich, in dem der Schatten war, neu zu streichen, wenn sich der untere <div> nach oben bewegt.
In Ihrem Fall habe ich den linken und rechten Rand zum <div> mit dem Box-Shadow hinzugefügt und zusätzlich den "shadow-fix" <div> hinzugefügt. Sie können die neue Version hier sehen:
Ссылка
Hoffe, dass es dir oder jemand anderem hilft.
Ich nahm die Lösung von Andy, aber anstatt ein leeres Element in das Markup zu setzen, fügte ich einfach ein leeres CSS-Pseudo-Element auf das Elternelement (das mit dem Schatten, nicht das geänderte Element) ).
%Vor%Funktioniert perfekt mit animierter Höhe in jQuery, Neuanstrich während der Animation und nicht nur am Ende. Danke Andy, dass er mich auf den richtigen Weg gebracht hat!
Ich habe diese CSS hinzugefügt, so dass der Browser neu berechnet, wie viel Höhe er entfernt hat, funktioniert es jetzt für Sie?
css
%Vor%Tags und Links css internet-explorer-10 css3 internet-explorer-9