jquery link color issue with firefox with .html()

so I have this code:

<a id="baby" href="#" style="display:inline-block;color:#373529;">
<div id="yea" class="like-num">Yeaaaaaaa</div>
</a>

with css

a {
 color: #1a5790; 
}

a * {
 color: #1a5790; 
}

.like-num{


color:#373529; 

}

so the link color in this link is supposed to be blackish even though default link css is blue. And it works, the link color did become blackish.

But then I call a jquery ajax call that on success it would replace #yea with the returned data, so

$('#yea').html(data);

But then when the data replace is completed, the link color turns back into blue even though befor开发者_高级运维e it was black, and this only happens in firefox, not in ie or chrome

does anyone know how I can modify the code so that link color stays black even after the data is replaced:

Thanks in advance!

There is no spoon

-The Matrix

You cannot have a block element (div) inside an inside element (span). This is invalid HTML.

You can however change div to span and provide the span with style display: block to show it as a block element. This is valid.

Even better: you can add display: block to the a itself as well. When you do that, you don't need the extra element inside the a, and this will probably solve your problem.

Replace all your "a" and "a.*" css with a, a:visited { color: #1A5790; } and see if it still does it.

Edit: Just noticed the div tag is actually inside the a tag. That would be invalid HTML (block-level element inside of an inline-element). Try replacing <div> with <span> and see if that helps.

It's probably the a * CSS declaration. If your return data contains elements (for example a span), it will pick up that CSS (color #1a5790) and not the one in the <a>.