css - 图像未显示在 HTML5 线框中

Question

我不明白为什么用这段代码不显示图像:

HTML:

<aside>
    <img />
<h3>Feature headline</h3>
</aside>

CSS:

aside {
        width: 286px;
        height: 200px;
        float: left;
        text-align: center;
        margin-left: 20px;
        background: rgb(225,225,225);
    }
aside img {
        width: 100%;
        height: 150px;
        background: rgb(200,200,200);
    }

JSFIDDLDE

当它与另一个一起显示时:

HTML:

    <div class="sharecontent">

        <h2>Organize headline</h2>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

    </div>  

    <img> 

CSS:

img {
        width: 440px;
        height: 225px;
        float: left;
        margin-left: 20px;
        margin-top: 20px;
        background: rgb(200,200,200);
    }
    .sharecontent {
        float:left;
        margin-left: 20px;
        width: 440px;
    }

JSFIDDLE

知道为什么第一个选项中没有显示图像吗？

Answer 1

这显然是 Firefox 的问题。适用于除 Firefox 之外的所有浏览器。设置 <img>至 display: block按照 Will 的建议解决了问题:

编辑:看起来是缺少的 src img 中的属性.虽然将元素设置为 display: block有效，这可能不是正确的解决方案。那为什么要用 <img> -标签。