CSS位置绝对和相对位置错误

我试着做一个简单的HTML和CSS啄：我有一个相对位置的巨大格，然后大量含有绝对位置的链接..CSS位置绝对和相对位置错误

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

来源

2012-08-08 thormayer

添加left和top财产您已关闭'div'元素？ – 2012-08-08 14:40:03

似乎它的工作对我来说，如果有一个标签包裹吧.. 那不是最优雅的方式来解决它IM，但它的工作。

继承人的代码：

<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-09 07:10:57 thormayer

文档类型和IE版本，你使用的是哪个？

尝试使用;

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

来源

2012-08-08 14:38:40

它工作正常，在Chrome &火狐，因为他们自动纠正你的HTML代码。所以如果你犯了一个错误，如不关闭<div>他们会为你关闭它。 IE不会关闭它，并向您显示错误的布局，而不是您期望的内容。在这种情况下，IE是唯一的浏览器如何更正，但由于所有的抨击，每个人都会认为IE是处理它的浏览器不正确。

而对于文档类型，使用此：

<!doctype html>

你的CSS代码是失去了一些东西，<a>是一个内联元素，所以，除非你让一个块级元素的高度宽度的连接将无法正常工作。

.wpr a {display: block;}

来源

2012-08-08 14:56:23 Mark

请您.wpr类

来源

2012-08-09 07:18:39 Carlos

CSS位置绝对和相对位置错误

回答

相关问题