底部和右侧绝对定位不适用于IE

Question

我正在建立一个网站,我需要设置bottom和right规定absolute文本的位置.

但似乎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',等等.