私は、この流動的なレイアウトの概念を持っています。これは、Firefox、opera、chrome では問題なく動作しますが、IE7 で開くとうまくいきません。IE6 にこだわる必要はありませんが、ブラウザ固有の CSS ファイルは避けたいと考えています。
問題は、a) IE がファンキーな小さなボールのサイズを変更せず、b) ウィンドウを水平方向に小さくすると、側面が切り取られることです。
奇妙なことは、同じであっても垂直方向の切断が行われないことです。
私はグラフィック デザイナーであり、プログラマーではありません。私のコードはおそらくひどいものであり、あまりにも網羅的または短すぎる答えを理解できないでしょう...
ここに私のコードの抜粋があります:
#body {
height: 100%;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color:white;
font-size:100%;
}
#gesamt {
position: absolute;
height: 100%;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
min-width:800px;
background-color:yellow;
}
#bg2k {
background-image: url(object23.png);
background-size: 100%;
width: 20%;
height: 100%;
background-repeat: no-repeat; /* kein repeat des hintergrunds */
position: absolute;
bottom: -70%;
left: 2%;
z-index:8;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#bg2l {
background-image: url(object24.png);
background-size: 100%;
width: 20%;
height: 100%;
background-repeat: no-repeat;
position: absolute;
bottom: -70%;
left: 9%;
z-index:7;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#bg2m {
background-image: url(object25.png);
background-size: 100%;
width: 20%;
height: 100%;
background-repeat: no-repeat;
position: absolute;
bottom: -70%;
left: 16%;
z-index:6;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
もう 1 つの興味深い問題は、position: fixed と言うとすぐに、私の小さなオブジェクトのいずれかが固定され、すべての地獄が失われ、レイアウトがページ全体に飛び散ることです。なんで？
ああ、ボディの前に # を付けたことがないことに気付きました。それは問題ですか？