If accessibility reasons is important then use the first variant (when customer want to see image without styles)
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
No need to conform imaginary SEO requirements, because the HTML code above has correct structure and only you should decide does this suitable for you visitors.
Also you can use the variant with less HTML code
<h1 id="logo">
<a href=""><span>Stack Overflow</span></a>
</h1>
/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
...
}
#logo a {
display:block;
width: actual_image_width;
height: actual_image_height;
background: url(image.png) no-repeat left top;
}
/* for accessibility reasons - without styles variant*/
#logo a span {display: none}
Please note that I have removed all other CSS styles and hacks because they didn't correspond to the task. They may be usefull in particular cases only.