1

子 DIV (リンクホルダー) の数に関係なく、バックグラウンド .jpeg の図を DIV (ラインホルダー) の高さに合わせて自動スケーリングしようとしています。

コードは Chrome と Firefox で 100% 機能しますが、IE11 は background-size を完全に無視します。

私の HTML マークアップは次のようになります。

<div id="active-container" class="ac1">
<div id="lineholder" style= "background-image: url(....); background-repeat: no-repeat; background-size: 44px 100%;">

<div id="text">
TEST
</div>

<div id="linkholder">
</div>

<div id="linkholder">
</div>

</div>
</div>

CSS:

#active-container {
min-width : 240px;
min-height : 26px;
height : auto;
float : left;
}

#lineholder {
position : relative;
min-width : 240px;
height : auto;
overflow : hidden;
}

#text {
position : absolute;
top : 50%;
margin : -13px 0 0 0;
width : 45px;
height : 26px;
left : 0px;
font-size : 8px;
font-weight : bold;
line-height : 26px;
}

#linkholder {
margin-left : 45px;
min-height : 26px;
width : 190px;
position : relative;
}

IE11 は、ラインホルダーの左上隅に元の背景画像を表示するだけですが、他のすべてのブラウザーは DIV に合わせて高さを拡大します。

こちらの写真をご覧くださいhttp://6710.sunnysite.dk/background-size_debug.jpg

背景画像 css は、html 内にあります。これは、HTML CSS の知識がまったくない人が、異なる背景画像を持つ個々のラインホルダーを挿入する必要があるためです ;) したがって、異なるクラスなどはオプションではありません。

4

3 に答える 3

1

問題は CSS にも、IE がそれをレンダリングする方法にもありませんでした (直接ではありません)。

コードはネットワーク共有にありました。偶然にもそれをデスクトップにコピーしたところ、うまくいきました。

問題はこのスレッドで説明され、回答されています -サイトがネットワークドライブにある場合、IE は CSS を適切にレンダリングしません

于 2014-09-25T19:43:24.653 に答える
0

ピクセルとパーセントが混在しているためだと思います。

background-size: 44px 100%;

私は、Safari がこれに非常に苦労していることを知っています (最近、これらの問題のかなりの部分が修正されましたが)。これに関しては、IE にも同じまたは類似の問題があるとしか考えられません。

背景画像の高さを 44 ピクセル、幅を 100% にする必要がある場合は、その周囲にラッパーを作成し、そのラッパーの高さを 44 ピクセルに設定する必要があります。次に、標準の背景サイズを使用します。(含む、カバー、100%など)

于 2014-09-25T07:47:16.477 に答える