Question

我试图制作一个简单的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; }

Answer 1

它适用于Chrome＆amp; FireFox，因为它们会自动更正您的HTML代码。因此，如果您犯了错误，就像没有关闭<div>一样，他们会为您关闭它。 IE不会关闭它，并向您显示不正确的布局，而不是您所期望的。在这种情况下，IE浏览器是唯一的浏览器如何更正，但由于所有的抨击，每个人都会认为IE是处理它的浏览器不正确。

对于doctype，请使用：

<!doctype html>

您的CSS代码缺少某些内容，<a>是内联元素，因此除非您将其设为块元素，否则高度宽度将无效。

.wpr a {display: block;}

Answer 2

请在left班级

中添加top和.wpr媒体资源

Answer 3

您使用的是哪种doc类型和IE版本？

尝试使用;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 4

如果我有一个标签包装它似乎它为我工作.. 这不是最优雅的解决方法，但它确实有效。

继承代码：

    <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; }

IE中的CSS位置绝对和位置相对错误

4 个答案: