底部和右側絕對定位不在IE上工作

Question

我正在製作一個網站，其中我需要爲absolute位置設置bottom和right規則。

但似乎IE9既懂position:absolute;但不bottom:xx;或right:xx;。

這裏是一個事先知情同意我在說一下：

IE：

鉻：

HTML：

<div id="slides_wrapper">   
    <a href="gallery.aspx"> 
     <div id="gallery_slide">           
      <p>Gallery</p>       
     </div> 
    </a> 
    <a href="sessions.aspx"> 
     <div id="sessions_slide"> 
      <p>Sessions</p> 
     </div> 
    </a> 
    <a href="offers.aspx"> 
     <div id="offers_slide"> 
      <p>Offers</p>       
     </div> 
    </a> 
    <a href="about.aspx"> 
     <div id="about_slide">    
      <p>About Us</p>       
     </div> 
    </a> 
    <a href="contact.aspx"> 
     <div id="contact_slide">     
      <p>Contact Us</p> 
     </div> 
    </a>     
</div> 

而CSS該部分：

#slides_wrapper 
{ 
    text-align:center; 
} 

#slides_wrapper div 
{ 
    border-radius : 5px; 
    border:1px inset black; 
    height:500px; 
    width:120px; 
    display:inline-block; 
    cursor:pointer;  
    position:relative; 
} 

#slides_wrapper p 
{ 
    text-shadow :3px 3px 9px black;  
    white-space:nowrap; 
    font-size:28px; 
    font-family:arial; 
    font-weight:bold; 
    color:White; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    position:absolute; 

} 

#gallery_slide 
{ 
    background: url('../img/gallery_slide.jpg') no-repeat -130px -120px; 
} 

#gallery_slide > p 
{ 
    bottom:50; 
    right:-20; 
} 

#session_slide 
{ 
    background: url('../img/sessions_slide.jpg') no-repeat -240px 0px; 
} 

#session_slide > p 
{ 
    bottom:60; 
    right:-30; 
} 

#offers_slide 
{ 
    background: url('../img/offers_slide.jpg') no-repeat -300px -135px; 
} 

#offers_slide > p 
{ 
    bottom:45; 
    right:-20; 
} 

#about_slide 
{ 

    background: url('../img/about_slide.jpg') no-repeat -350px 0px; 
} 

#about_slide > p 
{ 
    bottom:65; 
    right:-35; 
} 

#contact_slide 
{ 
    background: url('../img/contact_slide.jpg') no-repeat -600px 0px; 
} 

#contact_slide > p 
{ 
    bottom:75; 
    right:-50; 
} 

Answer 1

每當你設置一個固定數量的像素風格，確保把「PX」的號碼後。

#gallery_slide > p 
{ 
    bottom: 50px; 
    right: -20px; 
} 

我想這就是你在這裏要做的。在其他情況下，您可能更願意使用百分比，因此您的單位爲'％'。對於ems，使用'em'等。

Answer 2

在所有非零長度上都需要單位。你沒有，所以這個長度是無效的。 IE9的行爲是正確的。

Answer 3

使用這個，我相信你可以取得成果。

http://css3pie.com/