4

现在我正在使用绝对定位的 div 来实现页面的分割背景效果。它单独工作正常，但现在我需要将它嵌入到一个 div 中并使用缩放来缩放它。当我在 IE 8 中执行此操作时，绝对定位元素不会缩放并保持原始大小。

<div class="scale-wrap">
   <div class="scale-frame">
       <div class="container">
          some content
       </div>
       <div class="split-page-bg"></div>
   </div>
</div>

CSS

.scale-wrap {
    border: 1px solid #ccc;
    box-shadow: 1px 3px 5px #777;
    height: 426px;
    margin-left: -20px;
    overflow: hidden;
    padding: 0;
    width: 410px;
}

.scale-frame {
    -ms-zoom: 0.43;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.43);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.43);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.43);
    -webkit-transform-origin: 0 0;
}

.scale-frame {
    border: 0;
    height: 1000px;
    overflow: hidden;
    width: 950px;
}

.split-page-bg {
    background-color: #f3f3f3;
    top: 0;
    display: block;
    height: 400px;
    position: absolute;
    width: 100%;
    z-index: 10; 
}
4

1 回答 1

1

我正在解决一个类似的问题。尝试缩放：.43；

然而，我在 IE8 中遇到了缩放属性的问题——这就是我碰巧遇到这篇文章的方式。让我知道这对你有用！

更新：我发现这似乎对我更有效。你的旅费可能会改变：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.43, M12=0, M21=0, M22=0.43, SizingMethod='auto expand')";

于 2013-08-01T00:16:48.870 回答