Question

现在我正在使用绝对定位的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; 
}

Answer 1

我正在研究类似的问题。尝试缩放：.43;

我在IE8中遇到了与zoom属性相关的问题，但这也是我碰巧碰到这篇文章的原因。让我知道这对你有用！

更新：我发现这似乎对我有用。您的里程可能会有所不同：

-ms-filter：“progid：DXImageTransform.Microsoft.Matrix（M11 = 0.43，M12 = 0，M21 = 0，M22 = 0.43，SizingMethod ='auto expand'）”;

在IE8中使用缩放缩放绝对定位元素

1 个答案: