nicht angemeldet
Themenbereich: IE;
Hi,
folgendes im IE8:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style type="text/css">
[code lang=css] .addClass~#foo,
div {
height:0;
overflow:hidden;
}
#foo,
div.addClass {
height:auto;
}
</style>
</head>
<body>
<script type="text/javascript">
var old="foo";
function classChanger(id){
if(document.getElementById(old))
document.getElementById(old).className="";
if(document.getElementById(id))
document.getElementById(id).className="addClass";
old = id;
return false;
}
window.attachEvent("onload",function(){
var hashHandler = function(e){
classChanger(location.hash.substr(1));
};
window.attachEvent("onhashchange",hashHandler);
});
</script>
<ul>
<li><a href="" onclick="classChanger('foo');return false;">direkt: foo</a></li>
<li><a href="" onclick="classChanger('bar');return false;">direkt: bar</a></li>
<li><a href="" onclick="classChanger('baz');return false;">direkt: baz</a></li>
</ul>
<ul>
<li><a href="#foo">hashchange: foo</a></li>
<li><a href="#bar">hashchange: bar</a></li>
<li><a href="#baz">hashchange: baz</a></li>
</ul>
<div id="bar">
<h1>bar</h1>
</div>
<div id="baz">
<h1>baz</h1>
</div>
<div id="foo">
<h1>foo</h1>
</div>
</body>
</html>[/code]
Es sind zweimal drei Links.
Die ersten drei Links rufen die Javascript-Funktion direkt auf in der eine Klasse gesetzt wird die im CSS verwendet wird.
Klappt supi!
Die zweiten drei Links machen im Prinzip das gleiche nur über den Hash.
onhashchange ist ein Handler der die Funktion aufruft.
Wenn ich hier erst auf "foo" klicke, dann auf "bar" wird [id=foo] immer noch angezeigt.
Der Selektor ".addClass~#foo" der dann greifen müsste tut das nicht.
Das Problem ist nachdem es das erste mal aufgetaucht ist auch bei den "Links" die direkt die Funktion aufrufen...
Warum?
Bitte helft mir.
~dave
-
Hi, dave!
height:0;
Hast Du es mal mit einer Maßeinheit, bspw. "px" probiert?
Gruß, LX
--
RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.-
height:0;
Hast Du es mal mit einer Maßeinheit, bspw. "px" probiert?
So blöd ist der IE8 doch nicht, oder?
-
Hi,
height:0;
Hast Du es mal mit einer Maßeinheit, bspw. "px" probiert?
Ja.
Hatte stattdessen auch schonmal display:block/none.
Problem tritt auch da auf.Wenn ich im Developer-Tool irgendeinen neuen Style dazu packe oder einen ändere wirds auch richtig angezeigt.
~dave
-
-
.addClass~#foo,div { height:0; overflow:hidden; } #foo, div.addClass { height:auto; }Ich versteh nicht, was das werden soll. Okay, du willst, dass standardmäßig foo sichtbar ist. Einfache Lösung: Gib ihm die Klasse, um die Sichtbarkeit anzuschalten. Dieses Gefummel mit dem adjacent sibling selector löst einerseits einen Bug im IE8 aus. Andererseits nutzt du einen Bug des IE8 aus. Der adjacent sibling selector bezieht sich auf direkt aneinandergrenzende Elemente. Das heißt, wenn »bar« sichtbar ist (erstes div), dann trifft .addClass ~ #foo NICHT auf »foo« zu, denn es ist das dritte div. Es ist nämlich nicht direktes Geschwisterelement, sondern folgt an zweiter Stelle nach »baz«. > Wenn ich hier erst auf "foo" klicke, dann auf "bar" wird [id=foo] immer noch angezeigt. > Der Selektor ".addClass~#foo" der dann greifen müsste tut das nicht. Nein, der Selektor sollte nicht greifen. Er sollte nur in dem Falle greifen, wo »baz« (das zweite Div) die Klasse hat. Mathias-
Dieses Gefummel mit dem adjacent sibling selector [...]
- Du hast hier etwas verdreht, ist [http://forum.de.selfhtml.org/my/?t=203060&m=1372310 mir bei diesem Thema aber heute auch schon passiert] :p
- ist der General Sibling Combinator, der Adjacent Sibling Combinator ist das +
Der adjacent sibling selector bezieht sich auf direkt aneinandergrenzende Elemente.
Ja, der vom OP verwendet ist aber ein anderer Kombinator - der bezieht sich auf alle nachfolgenden Elemente dieses Typs innerhalb desselben Elternelements.
Deiner restlichen Folgerungen gehen somit von falschen Gegebenheiten aus.
-
~ ist der General Sibling Combinator, der Adjacent Sibling Combinator ist das +
Oh, danke für die Korrektur!
Deiner restlichen Folgerungen gehen somit von falschen Gegebenheiten aus.
Nun ja, der Lösungsvorschlag gilt weiterhin.
Mathias
-
Hi,
Ich versteh nicht, was das werden soll.
Okay, du willst, dass standardmäßig foo sichtbar ist. Einfache Lösung: Gib ihm die Klasse, um die Sichtbarkeit anzuschalten.Ich möchte, dass wenn es ein Element gibt, auf das :target zutrifft nur dieses angezeigt wird. Falls es kein solches gibt soll foo angezeigt werden.
Mit Klasse wäre foo aber immer angezeigt oder hab ich einen Denkfehler?
Auch hier nochmal Entschuldigung, das hier ist eine Folgefrage auf das hier und daher leider ein Doppelpost...
~dave
-