0

テキストの位置を設定bottomしてrightルールを設定する必要があるウェブサイトを作成しています。absolute

position:absolute;しかし、IE9はbottom:xx;orのみを理解しているようですright:xx;

これが私が話していることの写真です:

いいえ:

ここに画像の説明を入力

クロム: ここに画像の説明を入力

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 に答える