CSS: Internet Explorer Tipps

Conditional Tags¹

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->

<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->

<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->

<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->

<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->

<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->

<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->

<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->

<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->

<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

Input Pseudo Elemente (IE10+)²

/* Applies styles to the browse button of an input type=file */
::-ms-browse

/* Applies styles to the check of a checkbox or radio button input */
::-ms-check

/* Applies styles to the clear button of a text input */
::-ms-clear

/* Applies styles to the drop-down button of a select */
::-ms-expand

/* Applies styles to the progress control.
 * All styles are applied to the bar portion of the 
 * determinate progress bar, except for the 
 * animation-name style property, which controls the 
 * animation of the indeterminate progress control.
*/
::-ms-fill

/* Applies styles to portion of the track of a input type=range.
 * The styles are applied to the control's track from its 
 * smallest value up to the value currently selected by the 
 * thumb. In a left-to-right layout, this is the portion of the 
 * track to the left of the thumb.
*/
::-ms-fill-lower

/* Applies styles to portion of the track of a input type=range.
 * The styles are applied to the control's track from the value 
 * currently selected by the thumb up to the slider's largest 
 * value. In a left-to-right layout, this is the portion of the 
 * track to the right of the thumb.
*/
::-ms-fill-upper

/* Applies styles to the password reveal button of an input type=password */
::-ms-reveal

/* Applies styles to portion of the input type=range control that the user drags */
::-ms-thumb

/* Applies styles to the tick marks after the slider track of an 
 * input type=range. In a left-to-right layout, these are the 
 * ticks below the track. In a top-to-bottom layout, these are 
 * the ticks to the right of a track.
*/
::-ms-ticks-after

/* Applies styles to the tick marks before the slider track of 
 * an input type=range. In a left-to-right layout, these are 
 * the ticks above the track. In a top-to-bottom layout, these 
 * are the ticks to the left of a track.
*/
::-ms-ticks-before

/* Applies styles to the tooltip of an input type=range). Note
 * that only display and visibility style properties are applicable.
*/
::-ms-tooltip

/* Applies styles to the track of an input type=range */
::-ms-track

/* Applies styles to the content of a text or password input control, or a select control */
::-ms-value

CSS3 Polyfill

Mit dem CSS3Pie-Polyfill³ für Internet Explorer lässt sich ein Grossteil der CSS3 Effekte auch auf IE8 realisieren.

• border-radius
• box-shadow
• border-image
• CSS3 Backgrounds
• Verläufe
• RGBA

Verläufe

Die Option “GradientType” legt fest ob der Verlauf horizontal (1) oder vertikal (0) sein soll.

/* IE 6 y 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0');

/* IE 8 y 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0')";

/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);

Schatten

Es gibt zwei Arten von IE-Schatten-Filtern. Shadow⁴ erzeugt einen einfachen Schatten für den nur grösse und Richtung angegeben werden kann. DropShadow⁵ lässte genauere Abstands- und Richtungswerte zu, besitzt aber keine weichen Kanten. ACHTUNG: DropShadow wird zur Elementgrösse hinzugerechnet!

// Shadow
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

// DropShadow
filter: progid:DXImageTransform.Microsoft.DropShadow(color='#FF336699', positive='false', offX=-2, offY=2);

Transparente Hintergrundfarbe⁶

// simulare rgba in ie8 and earlier
.color-block { 
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
  zoom: 1;
}

Die Transparenz wird beim 8-stelligen HEX-Farbcode über die ersten zwei Ziffern definiert. 00 entspricht transparent, ff decken.

Fehlende position:absolute Elemente

Unter gewissen Bedingungen lässt IE8 einige absolut positionierte Elemente verschwinden. Diesem Problem kann mit einer definierten Breite entgegen gewirkt werden.

Pseudo Elemente

Bei der Verwendung von em-basierten Schriftgrössen in ::before Elementen, ist IE bis und mit Version 11 nicht in der lage den ursprünglichen Wert durch spätere Definitionen wieder zu überschreiben. Eine alternative Einheit verwenden.

1. http://www.quirksmode.org/css/condcom.html [↩]
2. http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx [↩]
3. http://css3pie.com [↩]
4. http://msdn.microsoft.com/en-us/library/ms533086%28v=vs.85%29.aspx [↩]
5. http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx [↩]
6. http://css-tricks.com/rgba-browser-support/ [↩]