html - 图像导致div在IE中扩展到超过设置的高度

Question

我有以下 HTML 代码:

<div id="event_create">
    <img src="WEB-INF/images/Classifieds/create_blurred_135x135.png"
        name="createbutton"
        onmouseover="buttondown('createbutton')"
        onmouseout="buttonup('createbutton')"
        onclick="buttonclick('createbutton')"
        alt="Create Classified Image"
        class="cameo">
    <h2 class="cameo_heading" >Create Ad</h2>
    <ul type="circle">
        <li class="cameo_content">Content goes here</li>
        <li class="cameo_content">Content goes here</li>
        <li class="cameo_content">Content goes here</li>
        <li class="cameo_content">Content goes here</li>
    </ul>
</div>

以下 CSS 支持:

#event_create {
    width:100%;
    height:143px;
    border: 1px solid green;
    background-color: red;
}

.cameo {
    float:left;
    margin-left:4px;
    margin-top:4px;
    border:1px solid black;
}

.cameo_heading {
    margin-left: 200px;
    margin-top: 3px;
    font-size:1.1em;
    color:gray;
}

.cameo_content {
    margin-left: 200px;
    font-size:12px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    line-height:1.2em;
} 

ul {
    list-style-type:circle;
    padding-left: 0;
    margin-left: 0;
    border: 1px dashed black;
} 

li {
    padding-left: 7px;
    margin-bottom: 5px;
}

代码在 Firefox 和 Safari 中正确显示。但是，IE 会用额外的空间填充图像下方的区域，从而使整个设计都变得不合时宜。该图像实际上是 135 x 135 像素。有人可以帮忙吗？

Answer 1

一致的跨浏览器网站设计的标准操作程序涉及始终做两件事:

1. 声明 DOCTYPE .这迫使浏览器(尤其是 IE)进入所谓的“标准兼容”模式，而不是怪异模式(两种委婉说法)；和
2. 使用重置 CSS，例如 meyerweb's或 Yahoo's消除浏览器在边框、填充、边距等默认设置方面的差异。