0

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

但是好像IE9只懂position:absolute;而不懂bottom:xx;or 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;
}
4

3 回答 3

5

每当您为固定数量的像素设置样式时，请确保将“px”放在数字之后。

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

我想这就是你在这里要做的。在其他情况下，您可能更喜欢使用百分比，因此您的单位将是“%”。对于 em，使用 'em'，依此类推。

于 2013-01-03T22:10:49.520 回答
4

所有非零长度都需要单位。你没有，所以长度无效。IE9 的行为是正确的。

于 2013-01-03T22:07:57.917 回答
4

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

http://css3pie.com/

于 2013-01-03T22:08:29.210 回答