Почему div имеет растянутое дно в IE, но хорошо работает в Chrome

Question

Почему div имеет растянутое дно в IE, но хорошо работает в Chrome

0

Изображение в элементе div растягивается в нижней части IE и firefox. Но он хорошо отображается в хроме

IE

Хром

Это выглядит странно в IE.

может кто-нибудь помочь мне, как исправить.

Мой HTML.

 <body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
    <div id="mobile">
        <div class="header">
            <div class="container">

                <h1><span>              
                      Välkommen            
                </span></h1>
                <a href="index.htm"><img src="../../published_images/Mobils_logo.png" alt="" /></a>
                <div style="clear:both; height:0; overflow:hidden;"></div>
            </div>
        </div>




        <div class="box-links">
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tbody>
                                <tr>
                                    <td><a href="community.htm">Community</a></td>
                                    <td><a href="mail.htm">Mail</a></td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

CSS

    /* Default */
body   
{
    background: #fff;
    margin: 0px;
    padding: 0px;
    font-size: 100%; /* to set it to 13px*/
    font-family: Verdana;
    color:#000;
}

* html .clearfix
{
    height: 1px;
}

h1, h2
{
    color: #444;
    font-weight:normal;
    padding-top:0;
    margin-top:0;
}

h1
{
    font-size: 1em;
}

a:link, a:visited, a:active, a:hover, a:focus
{
    color: #0096ff;
    text-decoration: none;
    font-size: 1em;
}

a:hover, a:focus
{
   background-color: #0096FF;
   color: #fff;
}

table
{
    width:100%;
    padding:0;
    margin:0;
}

td
{
    width:50%;
    padding:0;
    vertical-align:top;

}

/* Header */
div.header
{
    height:52px;
    padding:28px 5px 0;

}

div.header div.container
{
    border-bottom: 1px solid #0096FF;
    border-top: 1px solid #0096FF;
    padding:5px 0 5px 0;
}

div.header img
{
    float:left;
}

div.header h1
{
    float:right;   
    margin-top: 9px;
    margin-right: 10px;
}

div.header a
{
    clear:both;
}

/* Box Common */
div.box-advert, div.box-links, div.box-back, div.box-footer, div.box-text
{
    margin:0 5px 10px;
    padding: 8px 10px 8px;
    display:block;
    clear:both;
}
/* Box Advert */


div.box-links
{
    padding-bottom: 0;    
}

div.box-links TABLE A
{
    color: #626262;
}

div.box-links TABLE a:hover, div.box-links TABLE a:focus
{
   background-color: #0096FF;
   color: #fff;
}

div.box-links TABLE td
{
    padding-bottom:3px;
}

div.box-links ul li A
{
    background-image:url("../../published_images/mobil-arrow-blue.png");
    background-position:0 6px;
    background-repeat:no-repeat;
    padding-left:14px;
}

div.box-links ul li A:hover, div.box-links ul li A:focus
{
    background-image:url("../../published_images/mobil-arrow-white.png");
}

Patan 12 нояб. 2013, в 17:20

Источник

2

нужен код здесь пожалуйста
Keith 12 нояб. 2013, в 15:43
2

Мы могли бы помочь, если вы добавите что-нибудь полезное, например, соответствующие HTML и CSS.
Dave Zych 12 нояб. 2013, в 15:43
0

Чтобы строго ответить на ваш вопрос, это разные браузеры с разными способами обработки HTML-страницы.
ggdx 12 нояб. 2013, в 15:46
0

@Keith. Сожалею. Я добавил это сейчас. Вы не могли бы проверить
Patan 12 нояб. 2013, в 15:51
0

@DaveZych. Я прошу прощения. Я добавил код сейчас. Не могли бы вы помочь
Patan 12 нояб. 2013, в 15:51
1

1-й: padding:28px 5px 0; 2-й раз clear:both; и 3-й - после этого идет img с float:left Chrome считает, что не очищать float сам по себе, IE думает, что. знак равно
el Dude 12 нояб. 2013, в 16:09
0

@EL. Спасибо. Можете ли вы также предложить, как мне изменить это, чтобы работать хорошо в IE тоже.
Patan 12 нояб. 2013, в 16:16
0

@ Патан, да. удалить clear:both; и (возможно) избавиться от padding:28px 5px 0; и поместите <a>....<img>..</a> перед <h1>
el Dude 12 нояб. 2013, в 16:43

Показать ещё 6 комментариев

Теги:

html

css

1 ответ

Ещё вопросы

Мы могли бы помочь, если вы добавите что-нибудь полезное, например, соответствующие HTML и CSS.
Чтобы строго ответить на ваш вопрос, это разные браузеры с разными способами обработки HTML-страницы.
@Keith. Сожалею. Я добавил это сейчас. Вы не могли бы проверить
@DaveZych. Я прошу прощения. Я добавил код сейчас. Не могли бы вы помочь
1-й: padding:28px 5px 0; 2-й раз clear:both; и 3-й - после этого идет img с float:left Chrome считает, что не очищать float сам по себе, IE думает, что. знак равно
@EL. Спасибо. Можете ли вы также предложить, как мне изменить это, чтобы работать хорошо в IE тоже.
@ Патан, да. удалить clear:both; и (возможно) избавиться от padding:28px 5px 0; и поместите <a>....<img>..</a> перед <h1>

ksskr · Accepted Answer · 2013-11-12T14-11-00.000Z

Я вижу проблему. Его IE специфичен. Способ исправить это - изменить порядок тега и тега ссылки. как это

<a href="index.htm"><img src="../../published_images/Mobils_logo.png" alt="" /></a>                
<h1><span>Välkommen</span></h1>

Лучше Sol:

дать класс ссылке, не нужно менять порядок

<h1><span>Välkommen</span></h1>
<a class="imgLink" href="index.htm"><img src="../../published_images/Mobils_logo.png" alt="" /></a>

изменить css из

div.header img
{
    float:left;
}

в

div.header .imgLink
{
    float:left;
}

Есть лучшее решение. Первое решение не имеет логики. Я пытался, и это сработало. Но лучший способ для вас - разместить «ссылку», а не изображение внутри нее.