CSS - Hacks

Browser Hacks

IE10, IE11 und Edge

@media all and (-ms-high-contrast:none) {
     .beispiel { color: green } /* IE10 & IE11 */
     *::-ms-backdrop, .beispiel { color: red } /* IE11 */
}

@supports (-ms-ime-align:auto) {
   .beispiel { color: blue; } /* EDGE (nur alte EDGE) funktioniert 2020 nicht mehr*/
}

IE Hacks und IE Switches

Wie man dem Internet Explorer (und EdgeSonderregeln beibringt.

Internet Explorer Conditions

Generell ist die offizielle von MS empfohlene Methode eine Condition der Form:

 <!--[if IE]>
 <link rel="stylesheet" type="text/css" href="iehacks.css" />
 <![endif]-->

 <!--[if IE 5]>
 <link rel="stylesheet" type="text/css" href="iehacks-5.css" />
 <![endif]-->

 <!--[if lt IE 8]>
 <link rel="stylesheet" type="text/css" href="iehacks.css" />
 <![endif]-->

lt bedeutet less than. Die Regeln betreffen also aller Versionen unter IE 8 (die es im Moment noch nicht gibt;-) Außerdem gibts noch lte (lower than and equal) und gte (greater than and equal) important Hack

Unter Umständen kann auch die important- Klausel weiterhelfen, die der IE nicht kennt, wohl aber FF/ Opera/ Konqueror; zudem macht man sich dabei keines neuen Bugs zu Hilfe.

Wichtig: Immer erst die important- Klausel!

Die Klausel bewirkt bei entsprechend kompatiblen Browsern, dass diese Eigenschaft nachfolgend nicht mehr überschrieben werden kann.

Beispiel:

1. box { 
    min-height: 300px; 
    height: auto !important; 
    height: 300px; 
    ... 
}

Star-Plus-HTML-Hack (IE7)

Quelle: http://www.css-hack.de/Internet+Explorer/IE+7 (Zugriff: 08/2012)

Dem Universal-Selektor * wird ein Plus-Zeichen hinzugefügt. Diese Schreibweise wird lediglich vom IE 7 interpretiert!

* + html div {
   width : 20em;
}

Sternchen Hack (IE5,IE6)

Anwendung: Anweisungen nur für IE 5 und 6 z.B.

* html {...} /*das sehen nur IEs*/

Zukunftssicher: funktioniert nicht mehr bei IE 7

Box Model Hack / Tantek Hack

IE 5 und IE 5.5

Anwendung: Box Model Fehler von IE 5/5.5 korrigieren

Beispiel:

#kasten{
    width: 360px;
}

* html #kasten{       /*Das beachten nur IEs*/
    width: 400px;       /* der 'Falsche' Wert für alte IEs */
    w\idth: 360px;      /* das sieht nur der IE 6 */
}

Zukunftssicher: ja

Kind Selektor Hack

IE versteht den KindSelektor nicht. Z.B.

body > p 

Anwendung: Höhe nur für IE setzen (IE braucht Höhenangaben z.B. wg. Inline Padding Bug.)

Beispiel:

#inhalt {height: 100px;}  /*für IE*/
html>body #inhalt {       /*für andere Browser zurücksetzen*/
   height: auto
}

Browser Bugs

IE:mac CSS overflow-Bug

Der Internet Explorer für Mac stürzt ab, wenn man overflow: auto auf ein Input-Element des Typs Submit anwendet und auf die Schaltfläche klickt.

Lösung/Fix: Statt overflow: auto muss overflow: visible zugewiesen werden.

Weitere Info: http://www.bernd-lutz.de/css_overflow-bug_ie_mac-51.php Box Model Bug

IE 5 / 5.5

Standard: Elementbreite = width + paddings + margins + borders IE: Elementbreite = width + margin

Wenn also eine width und borders bzw. paddings angegeben sind werden die Boxen im IE 5 und 5.5 zu klein weil die paddings und borders nicht dazu gezählt werden. Lösung:

  1. Wenn width angegeben kein padding oder border verwenden. Stattdessen Ränder auf die Kindelemente anwenden.
  2. Box Model Hack / Kind Hack 

Kommentar Hack

Anwendung: vor IE/Mac verstecken z.B. bei 3px Bug der nur in Win Versionen auftaucht.

Beispiel (in Kombination mit * Hack)

/* Hide from IE5-mac. Only IE-win sees this. \*/

• html #floatbox {

margin-right: 10px; }

• html p {

height: 1%; margin-left: 0; } /* End hide from IE5/mac */

Inline Padding Bug

Horizontales Padding und Margin funktioniert bei Inline-Elementen im IE nur wenn eine Höhe angegeben ist. Dann kann es allerdings zu anderen Seiteneffekten kommen.

Lösung Höhe mit Kind Selektor Hack setzen. 3px Bug bei Bildern

Oft taucht beim IE im Zusammenhang mit floatenden Elementen eine Lücke unterhalb oder links rechts eines Bildes auf. Selbst eine Höhe für das Div hilft nichts.

Lösungsansätze: negatives padding für (Win IEs) overflow: hidden; Double Margin Bug

IE6 und kleiner berechnen den Margin einer floatenden Box manchmal doppelt.

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won't show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left. (Position Is Everything)

Lösung: Die floatende box bekommt den Wert:

display: inline;

Der Bug ist damit behoben und die Box bleibt (nach W3C Definition trotzdem ein Block Element, weil floatende Boxen automatisch immer Block-Elemente werden.

IE7 Update

Aus: IE-Blog http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx Korrigierte Bugs Bugs we fixed

   * All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)
         o Peekaboo Bug
         o Internet Explorer and Expanding Box Problem
         o Quirky Percentages
         o Line-height bug
         o Border Chaos
         o Disappearing List-Background bug
         o Guillotine Bug
         o Unscrollable Content bug
         o Duplicate Characters Bug
         o IE and Italics
         o Doubled Float-Margin bug
         o Duplicate Indent bug
         o Three pixel text jog
         o Creeping Text bug
         o Missing First letter bug
         o Phantom box bug 

Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:

   * Overflow now works correctly! (That means boxes do not automatically grow any more.)
   * Parser bugs: * html, _property and /**/ comment bug
   * Select control: CSS style-able and not always on top
   * Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
   * Addressed many relative positioning issues
   * Addressed many absolute positioned issues
   * % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
   * <?xml> prolog no longer causes quirks mode
   * HTML element truly independent of the Body (now gets its own width, height etc.)
   * 1 px dotted borders no longer render as dashed
   * Bottom margin bug on hover does not collapse margins
   * Several negative margin issues fixed
   * Recalc issues including relative positioning and/or negative margins are fixed now
   * CLSID attribute of <object> tag no longer limited to 128 characters
   *  :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
   * Descendant selector now works properly for grand children when combined with other selectors
   * First-line and first-letter now applies when there is no space between word :first-line and opening brace {
   * Pseudo-classes now are working as expected if selector is excluded
   * The :link selector works now for anchor tag with href set to bookmark
   * Addressed !important issues
   * PositionIsEverything piefecta-rigid.htm now works
   * List-item whitespace bug fixed
   * Fixed Absolutely Buggy II
   * Absolute positioned elements now use always correct containing block for positioning and size information
   * Nested block elements now respect all overflow declarations (hidden, scroll, etc)
   * Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
   * <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
   * We no longer lose the image aspect ratio on refresh
   * Cleaned up our ident parsing according to CSS2.1 rules
   * Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
   * And many more 

We also extended our existing implementations to comply with W3C specifications:

   * Enable :hover on all elements not just on <a>
   * Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
   * Improved <object> fallback 

Finally, we added new features from CSS2.1:

   * Min/max width/height support (also for images, which did not work in IE7b2)
   * Transparent borders
   * Fixed positioning support
   * Selectors: first-child, adjacent, attribute, child
         o A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector) 
   * Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J) 

Links

http://css.nu/pointers/bugs-ie.html 2006-06-29

http://websemantics.co.uk/tutorials/useful_css_snippets/ Useful Snippets

aus http://websemantics.co.uk/tutorials/useful_css_snippets/ Leveller

Versuche alle Browser auf möglichts gleiche Werte 'vorzukonfigurieren'

• {margin:0; padding:0}

Removes margin and padding from every element.

html {height:100%}

Sets the window height.

min-height:101%;

Sets the minimum page height to greater than the window height to force Netscape & Firefox to display vertical scrollbars, thereby preventing content jumping on fixed width pages. IE doesn't understand min-height and totally ignores this setting.

font:100.01%/130% Verdana, Helvetica, sans-serif;

Set font-size to a percentage preventing a Windows IE "extreme font re-sizing" bug. Set font-size slightly larger than 100% to repair Opera rounding errors. Set less than 101% to prevent Safari errors. The line-height setting gives nice, clear and easy-read spacing. Verdana is the most readable, and readily available screen font in Windows. Helvetica most readable, and readily available screen font on Macintosh computers. Sans-serif is the most readable to the widest audience for body text.

color:#000; background:#fff;

Set general colour & background.

width:760px;

Fixed width set for 800 pixel wide browser displays.

margin:0 auto

Margins are set for centring the content. This works for IE6, Firefox, Opera, Safari and Netscape but IE5 and IE5.5 require further treatment.

text-align:center

Added to the body element to force IE to centre all content

body * {text-align:left}

Resets all text aligns to the left

1. wrapper {width:760px}

States the wrapper width. All centred content goes inside a div with an id="wrapper.

• {

 margin:0;
 padding:0} 

html {

 height:100%; 
 font-size:100.01%

} body {

 text-align:center;
 min-height:101%;
 font:100.01%/130% Verdana, Helvetica, sans-serif;
 color:#000; background:#fff;
 width:760px;
 margin:0 auto 

} body * {text-align:left;}

1. wrapper {width:760px}