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

它在 Chrome 和 FireFox 中运行良好，因为它们会自动更正您的 HTML 代码。因此，如果您犯了错误，例如不关闭 a<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

您使用的是哪种文档类型和 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 回答
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 回答