Themenbereich: IE; – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Themenbereich: IE; Mon, 31 Jan 11 22:00:54 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492064#m1492064 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492064#m1492064 <p>Hi,</p> <p>folgendes im IE8:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> [code lang=css] .addClass~#foo, div { height:0; overflow:hidden; } #foo, div.addClass { height:auto; } </code></pre> <pre><code> </style> </head> <body> <script type="text/javascript"> </code></pre> <pre><code class="block language-javascript"> <span class="token keyword">var</span> old<span class="token operator">=</span><span class="token string">"foo"</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">classChanger</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>old<span class="token punctuation">)</span><span class="token punctuation">)</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>old<span class="token punctuation">)</span><span class="token punctuation">.</span>className<span class="token operator">=</span><span class="token string">""</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span>className<span class="token operator">=</span><span class="token string">"addClass"</span><span class="token punctuation">;</span> old <span class="token operator">=</span> id<span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> window<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">"onload"</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> <span class="token function-variable function">hashHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">classChanger</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>hash<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> window<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">"onhashchange"</span><span class="token punctuation">,</span>hashHandler<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <pre><code> </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> </code></pre> <p></html>[/code]</p> <p>Es sind zweimal drei Links.<br> Die ersten drei Links rufen die Javascript-Funktion direkt auf in der eine Klasse gesetzt wird die im CSS verwendet wird.<br> Klappt supi!</p> <p>Die zweiten drei Links machen im Prinzip das gleiche nur über den Hash.<br> onhashchange ist ein Handler der die Funktion aufruft.<br> Wenn ich hier erst auf "foo" klicke, dann auf "bar" wird [id=foo] immer noch angezeigt.<br> Der Selektor ".addClass~#foo" der dann greifen müsste tut das nicht.</p> <p>Das Problem ist nachdem es das erste mal aufgetaucht ist auch bei den "Links" die direkt die Funktion aufrufen...</p> <p>Warum?</p> <p>Bitte helft mir.</p> <p>~dave</p> Themenbereich: IE; Tue, 01 Feb 11 08:20:20 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492069#m1492069 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492069#m1492069 <p>Hi, dave!</p> <blockquote> <p>height:0;</p> </blockquote> <p>Hast Du es mal mit einer Maßeinheit, bspw. "px" probiert?</p> <p>Gruß, LX</p> <div class="signature">-- <br> RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher. </div> Themenbereich: IE; Tue, 01 Feb 11 14:45:56 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492065#m1492065 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492065#m1492065 <blockquote> <pre><code class="block language-css"></code></pre> </blockquote> <pre><code> .addClass~#foo, </code></pre> <blockquote> <pre><code> div { height:0; overflow:hidden; } #foo, div.addClass { height:auto; } </code></pre> </blockquote> <pre><code class="block"> 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 </code></pre> Themenbereich: IE; Tue, 01 Feb 11 15:04:18 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492067#m1492067 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492067#m1492067 <blockquote> <p>Dieses Gefummel mit dem adjacent sibling selector [...]</p> </blockquote> <dl> <dt>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</dt> <dd>ist der General Sibling Combinator, der Adjacent Sibling Combinator ist das +</dd> </dl> <blockquote> <p>Der adjacent sibling selector bezieht sich auf direkt aneinandergrenzende Elemente.</p> </blockquote> <p>Ja, der vom OP verwendet ist aber ein anderer Kombinator - der bezieht sich auf alle nachfolgenden Elemente dieses Typs innerhalb desselben Elternelements.</p> <p>Deiner restlichen Folgerungen gehen somit von falschen Gegebenheiten aus.</p> Themenbereich: IE; Tue, 01 Feb 11 22:46:48 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492066#m1492066 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492066#m1492066 <p>Hi,</p> <blockquote> <p>Ich versteh nicht, was das werden soll.<br> Okay, du willst, dass standardmäßig foo sichtbar ist. Einfache Lösung: Gib ihm die Klasse, um die Sichtbarkeit anzuschalten.</p> </blockquote> <p>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.</p> <p>Mit Klasse wäre foo aber immer angezeigt oder hab ich einen Denkfehler?</p> <p>Auch hier nochmal Entschuldigung, das hier ist eine Folgefrage auf <a href="https://forum.selfhtml.org/?t=203008&m=1371896" rel="noopener noreferrer">das hier</a> und daher leider ein Doppelpost...</p> <p>~dave</p> Themenbereich: IE; Tue, 01 Feb 11 21:49:33 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492068#m1492068 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492068#m1492068 <blockquote> <p>~ ist der General Sibling Combinator, der Adjacent Sibling Combinator ist das +</p> </blockquote> <p>Oh, danke für die Korrektur!</p> <blockquote> <p>Deiner restlichen Folgerungen gehen somit von falschen Gegebenheiten aus.</p> </blockquote> <p>Nun ja, der Lösungsvorschlag gilt weiterhin.</p> <p>Mathias</p> Themenbereich: IE; Tue, 01 Feb 11 09:13:20 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492071#m1492071 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492071#m1492071 <blockquote> <blockquote> <p>height:0;</p> </blockquote> <p>Hast Du es mal mit einer Maßeinheit, bspw. "px" probiert?</p> </blockquote> <p>So blöd ist der IE8 doch nicht, oder?</p> Themenbereich: IE; Tue, 01 Feb 11 09:42:26 Z https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492070#m1492070 https://forum.selfhtml.org/self/2011/jan/31/themenbereich-ie/1492070#m1492070 <p>Hi,</p> <blockquote> <blockquote> <p>height:0;</p> </blockquote> <p>Hast Du es mal mit einer Maßeinheit, bspw. "px" probiert?</p> </blockquote> <p>Ja.</p> <p>Hatte stattdessen auch schonmal display:block/none.<br> Problem tritt auch da auf.</p> <p>Wenn ich im Developer-Tool irgendeinen neuen Style dazu packe oder einen ändere wirds auch richtig angezeigt.</p> <p>~dave</p>