0

シンプルな html と CSS を作成しようとしています: 相対的な位置を持つ巨大な div があり、絶対的な位置を含むリンクがたくさんあります..

FF と chrome では問題なく動作しますが、IE では非常にうまく動作しません。

IE ではポジショニングが悪く、「margin: 0 auto;」が得られないようです。ぶっちゃけ..

これは私のコードです:

HTML:

<div class="wpr">
<a href="http://www.leumi.co.il/" target="_blank" id="leumi"></a>
<a href="http://www.oren-ins.co.il/" target="_blank" id="oren"></a>
<a href="http://www.energy.org.il/" target="_blank" id="energy"></a>
<a href="http://www.lionorl.co.il/" target="_blank" id="leon"></a>
<a href="http://www.calcalist.co.il/" target="_blank" id="yit"></a>
<a href="http://www.yit.co.il/" target="_blank" id="calcalist"></a>
<a href="https://events.eventact.com/runreg/event/regform.aspx?event=4243&company=204&form=1617&account=0&lang=he&login=562974333928" target="_blank" id="register"><img src="sign.gif" alt="register" /></a>

CSS:

.wpr
    {

        background: url('bg_page.gif') no-repeat 0 0 ;
        width: 980px; height: 643px; margin: 0 auto; position: relative;
        }

        #leumi{ position: absolute;  top: 181px; right:96px ; width: 102px; height: 30px; }
        #oren{ position: absolute;  top: 176px; right:227px ; width: 139px; height: 43px; }
        #energy{ position: absolute;  top: 176px; right:380px ; width: 139px; height: 43px;}
        #leon{ position: absolute;  top: 510px; right:812px ; width: 139px; height: 43px; }
        #calcalist{ position: absolute;  top: 584px; right:841px ; width: 139px; height: 43px;}
        #yit{ position: absolute;  top: 579px; right:0px ; width: 139px; height: 43px; }
        #register{ position: absolute;  top: 444px; right:808px ; width: 139px; height: 43px; }
4

4 に答える 4

2

HTML コードを自動修正するため、Chrome と FireFox で問題なく動作します。したがって、エラーを犯した場合、たとえば、閉じないなどのエラーが発生した場合は、<div>閉じられます。IE はそれを閉じず、予期したものではなく、間違ったレイアウトを表示します。その場合、IE はどのように修正するかという唯一のブラウザーですが、すべてのバッシングのために、IE がそれを正しく処理しないブラウザーであると誰もが考えるでしょう。

doctype には、次を使用します。

<!doctype html>

CSS コードに何かが欠けています。<a>これはインライン要素であるため、ブロック要素にしない限り高さと幅は機能しません。

.wpr a {display: block;}
于 2012-08-08T14:56:23.940 に答える
1

クラスにプロパティを追加leftしてくださいtop.wpr

于 2012-08-09T07:18:39.677 に答える
0

私がそれをラップするタグを持っていれば、それはうまくいったようです..それはそれを解決するための最もエレガントな方法ではありませんが、うまくいきました.

コードは次のとおりです。

    <table align="center" >
<tr>
<td>
<div class="wpr">
    <a href="http://....il/" target="_blank" id="leumi"></a>
    <a href="http://...co.il/" target="_blank" id="oren"></a>
    <a href="http://....il/" target="_blank" id="energy"></a>
    <a href="http://..." target="_blank" id="leon"></a>
    <a href="http://../" target="_blank" id="yit"></a>
    <a href="http://..." target="_blank" id="calcalist"></a>
    <a href="https://events.eventact.com/runreg/event/regform.aspx?event=4243&company=204&form=1617&account=0&lang=he&login=562974333928" target="_blank" id="register"><img src="sign.gif" alt="register" /></a>
</div>

</td>
</tr>
</table>

CSS :

    table 
{
    margin: 0 auto;
    width: 980px;
    border-collapse: collapse;
    border-spacing: 0;
}
    .wpr
    {

        background: url('bg_page.gif') no-repeat 0 0 ;
        width: 980px; height: 643px; position: relative;overflow:hidden;
    }

        #leumi{ position: absolute;  top: 181px; right:96px ; width: 102px; height: 30px; }
        #oren{ position: absolute;  top: 176px; right:227px ; width: 139px; height: 43px; }
        #energy{ position: absolute;  top: 176px; right:380px ; width: 139px; height: 43px;}
        #leon{ position: absolute;  top: 510px; right:812px ; width: 139px; height: 43px; }
        #calcalist{ position: absolute;  top: 584px; right:841px ; width: 139px; height: 43px;}
        #yit{ position: absolute;  top: 579px; right:0px ; width: 139px; height: 43px; }
        #register{ position: absolute;  top: 444px; right:790px ; width: 139px; height: 43px; }
于 2012-08-09T07:10:57.457 に答える
0

使用しているドキュメントの種類と IE のバージョンを教えてください。

使ってみる;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2012-08-08T14:38:40.930 に答える