css - 将图像旋转 90 度并绝对定位在 div 内

Question

好的，这是 fiddle 。

http://jsfiddle.net/ozzy/mnmc7/

代码在这个阶段是非常非常基础的，但本质上是 css:

.Box {
    width:660px;
    border: 1px solid #aaaaaa;
    border-radius: 3px 3px 3px 3px;
    height:140px;
}
#Logo {
    position:absolute;
    -moz-transform:rotate(270deg);
    transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    z-index:inherit;
    zoom:1;
}

这是目前的 html:

<div class="Box">
                                <div id="Logo">
                                    <img src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" width="130px">
                                </div>
                            </div>

这个想法是让图片正好位于 div 内，并以 5 像素的边距将其 float 到左侧。所以它看起来像这样:

Answer 1

尝试将此添加到 Logo 中:

position:relative;
float:left;
top:43px;
left:-33px;

同样在 Internet Explorer 9 中，他们似乎希望您使用 rotation=4

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

http://jsfiddle.net/AlienWebguy/mnmc7/21/