html - 如何使用 MVC 3 在 IE6 中将文本放在图像旁边

Question

我希望有人能回答这个问题，因为我已经抓狂了一天了。

我想要做的就是在图像旁边放置一些文本。无论我尝试哪种方法，IE6 都坚决拒绝正确呈现它。

这是 HTML/Razor:

<div class='prod-img'>
    <img src="@Url.Content("~/Content/ButtonImages/BackButton.bmp")" onclick="Quit()"/>
</div>

<div class='prod-text'>       
    <p>Something here</p>
</div>

这是 CSS:

.prod-img
{
    position: relative;  
    top: .8em;
    left: .1em;    
}

.prod-text
{
    position: absolute;
    left: 5em;
    top: .75em;   
}

出于某种原因，IE6 将文本填充在图像下方而不是图像旁边。

Answer 1

向左浮动似乎在 IE6 中有效:

.prod-img
{
    float: left; 
}

.prod-text
{
   margin-left: 10px;    
}

JS FIddle 在这里:http://jsfiddle.net/qSExE/4/

如果这不适用于您的完整代码，那么我会冒险猜测没有足够的水平空间来容纳文本，所以它会下降到图像下方( float 下降)？