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