0

列に設定された 4 つの異なる div 要素で構成される Web ページがあります。ページにはスクロールがないため、すべてのコンテンツが画面上に表示されます。私の質問は、ページ構造を台無しにするため、コンテンツをズームするときに div バックラウンド ズームを無効にする方法です。もちろん、メディア クエリを介してさまざまなバックラウンド サイズを使用しているため、すべてのケースで機能するはずです。私の最初の質問は、とにかくそれが可能であり、IE8 で動作するかということです。

コード:

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>

#container {
    display: table;
    width: 100%; height:100%;
    border-spacing: 1px;
    background-color:black;
    margin-left:auto; margin-right:auto;
}

#container > div {
    display: table-cell;
    padding:0px;
}

body,html{ height:100%; width:100%; overflow:hidden; }

#div1{ position:relative;   
         background-image:url(../images/bg/left.jpg);
         background-size: cover;
     background-repeat:no-repeat;
  }
#div2{height:100%;
     background-image:url(../images/bg/center.jpg);
     background-size: 100% 100%;
     background-repeat:no-repeat;
     position:relative;
  }

#div3{height:100%; 
    background-image:url(../images/bg/right.jpg);
    background-repeat:no-repeat;
background-size:cover;
    position:static;    
  }

#div4{ height:100%; 
     background-image:url(../images/bg/right2.jpg);
     background-repeat:no-repeat;
 background-size:100% cover; 
 position: static;
 background-repeat:no-repeat; 
   }
4

1 に答える 1