Изображение заставляет div расширяться за заданную высоту в IE - PullRequest
2 голосов
/ 31 января 2010

У меня есть следующий 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 х 135 пикселей. Может кто-нибудь помочь, пожалуйста?

1 Ответ

3 голосов
/ 31 января 2010

Стандартная рабочая процедура для согласованного кросс-браузерного дизайна Веб-сайт включает в себя всегда , делающих две вещи:

  1. Объявите DOCTYPE . Это вынуждает браузеры (в частности IE) переходить в так называемый «совместимый со стандартами» режим вместо режима причуд (оба эвфемизма); и
  2. Используйте CSS для сброса, например meyerweb или Yahoo , чтобы избавиться от различий браузера в настройках по умолчанию для границ, отступов, полей и т. Д.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...