CSS - Hacks

Hacks

Wie man dem IE Sonderregeln beibringt.

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:

box {

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

Sternchen Hack

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

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

Zukunftssicher: ?

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:

Wenn width angegeben kein padding oder border verwenden. Stattdessen Ränder auf die Kindelemente anwenden.
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;

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

#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;} 
#wrapper {width:760px}

CSS - Hacks

Inhaltsverzeichnis