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

Question

我正在制作一个网站，我需要在其中为文本的 absolute 位置设置 bottom 和 right 规则。

但是IE9好像只支持position:absolute;，不支持bottom:xx;和right:xx;。

这是我正在谈论的图片:

即:

Chrome :

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

我想这就是您在这里的意思。在其他情况下，您可能更喜欢使用百分比，因此您的单位将是“%”。对于 em，请使用“em”等。