Pourquoi la div parent est-elle liée?

Question

J'ai une Div à l'intérieur d'une autre. L'enfant Div est un lien qui lance une animation javascript (en animant les propriétés css) et la raison pour laquelle je mets un wrapper est parce que je voulais que l'enfant soit centré et flotter. Donc l'enfant Div fait le centrage et le parent fait le flottement. La raison en est que vous ne pouvez pas faire margin:0 auto; avec une propriété float:.

Maintenant, mon problème est que lorsque je mets un lien autour de la Div Divorce, la div parente est également liée! Cela me déconcerte vraiment pour le moment. Cela arrive dans Chrome et Firefox, mais étrangement, cela n'arrive pas dans IE! Est-ce que quelqu'un sait ce qui ne va pas?

Le parent est #eastereggwrapper et l'enfant est #eastereggbutton. Voici les extraits de code, mon HTML:

<div id="eastereggwrapper"> 
    <a href="" class="secret" > 
    <div id="eastereggbutton" > 
     Don't Click Me 
    </div> 
    </a> 
</div> 

et mon CSS:

#eastereggwrapper { 
    background-color: black; 
    bottom: 0px; 
    width: 100%; 
    position: relative; 
    float:left; 
} 

#eastereggbutton { 
    margin:0 auto; 
    width:10%; 
    height:50px; 
    background-color:green; 
    color: black; 
    font-size:18px; 
    font-family:Tahoma, Geneva, sans-serif; 
    text-align:center; 
} 

post-scriptum La classe secrète n'est pas définie, elle est utilisée pour le code Javascript.

Answer 1

Essayez une des deux choses:

1. Placez le <a> à l'intérieur de la deuxième div
2. Remplacer l'enfant div avec la balise <a>:

HTML

<div id="eastereggwrapper"> 
    <a href="" class="secret" id="eastereggbutton"> 
     Don't Click Me 
    </a> 
</div> 

CSS

#eastereggbutton { 
    display: block; 
    margin:0 auto; 
    width:10%; 
    height:50px; 
    background-color:green; 
    color: black; 
    font-size:18px; 
    font-family:Tahoma, Geneva, sans-serif; 
    text-align:center; 
} 

Answer 2

ajouter juste

#eastereggwrapper > a { 
    width:10%; 
    display: block; 
    margin:auto; 
} 

à votre CSS et de supprimer

margin:0 auto; 
width:10%; 

des propriétés de #eastereggbutton