Wikizone - Benutzerbeiträge [de]

CSS - Hacks

2006-06-29T14:31:35Z

84.161.151.232: /* Hacks */

== Hacks ==

=== !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;

== Browser Bugs - Listen ==
aus http://css.nu/pointers/bugs-ie.html 2006-06-29

CSS - Hacks

2006-06-29T14:11:55Z

84.161.151.232: /* Browser Bugs */

== Hacks ==

=== 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;

== Browser Bugs - Listen ==
aus http://css.nu/pointers/bugs-ie.html 2006-06-29

CSS - Hacks

2006-06-29T13:19:50Z

84.161.151.232: /* Browser Bugs */

== Hacks ==

=== 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==

===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;

== Browser Bugs - Listen ==
aus http://css.nu/pointers/bugs-ie.html 2006-06-29