0

IE と Firefox で div 要素の画像が下に向かって伸びています。しかし、それはクロムでうまく表示されます

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");
}
4

1 に答える 1

1

問題がわかりました。そのIE固有。これを修正する方法は、リンク タグとタグの順序を変更することです。このような

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

より良いソル:

リンクにクラスを与えます。順序を変更する必要はありません

<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;
}
于 2013-11-12T16:24:47.100 に答える