div innerhalb des Ankers

Question

Das passiert nicht immer. Ein Fehler ist kein Fehler, wenn er nicht reproduziert werden kann!

Zunächst dachte ich, es handele sich um einen Fehler meiner jungen Programmierkenntnisse, aber derselbe Fehler erscheint auf meinen beiden Websites, offenbar unter denselben Umständen.

<a style="display:block;" href="link">
 <div>text1</div>
 <div>text2</div>
</a>

Manchmal werden beim Surfen Links mit div s in ihnen werden seltsam dargestellt, doppelte Elemente erscheinen ohne Grund auf der Seite, Text wird auf verschiedene Links verteilt, ein echtes Chaos.

Echte Bildschirmfotos:

http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg

Hatte jemand dieses Problem? Gibt es eine Lösung? Ich bin nicht an Lösungen interessiert, die JavaScript beinhalten!

Answer 1

Ich vermute, dass Ihre Divs in Links in einigen Browsern Inkonsistenzen verursachen (vielleicht spielt Ihr CSS hier eine Rolle).

"Semantik" und gültige Auszeichungen sind Schlagworte.

Warum sollten Sie also DIVs in einer <A> Tag. Sie können etwas wie dies versuchen

<a href="#">
       <span class="divstyle">Text 1</span>
       <span class="divstyle">Text 2</span>
</a>

dann in CSS

.divstyle { 
    display: block; //and other styles etc
 }

Answer 2

Prüfen Sie Ihre Seite mit einem HTML-Validator. Ich bin mir zu 90% sicher, dass Sie keine <div> Element innerhalb von Inline-Elementen wie <a> . Auch wenn Sie den Link auf display:block ist es immer noch nicht erlaubt, und die Browser spucken womöglich in die Röhre.

Sie können stattdessen Spans verwenden und diese auf Block setzen:

<style type="text/css">
  .link, .link span { display: block; }
</style>
<a class="link" href="example.com">
 <span>text1</span>
 <span>text2</span>
</a>