overflow:auto;を指定した要素の背景画像が固定できない件
ある特定のボックスであるdivの高さと横幅を固定とし、テキストがその領域からはみ出る場合にスクロールバーが出る設定を以下のようにした。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
}
まずこれでIE以外のブラウザでは背景画像をdivの領域内で固定できた。
このままだと、IEで背景画像はスクロールで消えてしまうため、
ここにさらにbackground-attachment:fixed;を追加。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
background-attachment:fixed;
}
こうした場合、IE6以外のブラウザで背景画像の開始位置の解釈が変わり、ウインドウの左上が開始点となってしまった。
そのため、IE6専用にハックをつける。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
_background-attachment:fixed;
}
ここまでで、FireFox3.6,Safari4,IE6には対応できた。
が、IE7では背景画像は出るが、固定はできていない状態。
ここまでが限界だったため、いろいろ調べてみたところ、
ここの一番下に探し求めていた情報がありました。
背景画像を固定しない場合
・背景画像を設定したボックス内の左上が0%位置となる。
・IEも同様。背景画像を固定した場合
・背景画像の0%位置は閲覧領域（自分の場合はウインドウの左上）となる。
・IEの場合、body要素とhtml要素に背景画像を指定した場合は上と同様。
・IE6でそれ以外の場合は背景画像を設定したボックス内の左上が0%位置となる。
・IE7でそれ以外の場合は閲覧領域（ウインドウ）の左上が0%位置となる。
ただ、自分の場合についてはdiv要素の位置が常にウインドウの左右中心で、上から200pxの位置にあったため、以下のように無理やり背景位置を固定とした。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
*background-attachment:fixed;
*background-position:50% 200px;
_background-position:0 0;
}
IE以外のブラウザでは背景固定を設定しない（fixedにしなくても背景が固定されるから）で背景位置を００ポジションに設定。
IE6,IE7は背景画像を固定し、ウインドウの左上を始点として背景画像の位置を設定。
IE6は背景画像を固定にしても、背景画像の開始位置がdiv要素の左上になるためウインドウではなく、divボックスの左上を背景画像開始点とする。
ブラウザシェアと画面解像度のランキング 2009年4月期
現在管理している4サイトでのブラウザシェア及び画面解像度
期間：2009/04/01-2009/04/30
■ブログ(プライベート)
1. Internet Explorer—–78.18%
—7.0 79.73%
—6.0 19.93%
—8.0 0.33%
2. Firefox—–11.95%
3. Safari—–6.75%
4. Netscape—–2.08%
5. Chrome—–0.52%
6. Opera—–0.52%
1. 1024×768 —–34.81%
2. 1280×800 —– 29.87%
3. 1366×768 —–6.49%
4. 1680×1050 —–5.19%
5. 1280×1024 —–4.16%
6. 1280×768 —–3.64%
7. 1400×1050 —–3.38%
8. 1920×1200 —–2.86%
9. 1440×900 —–2.60%
10. 800×600 —–1.82%
■地方のシネコン
1. Internet Explorer—–89.80%
—7.0 58.45%
—6.0 37.61%
—8.0 2.88%
—5.5 0.69%
—5.0 0.10%
2. Firefox—–3.82%
3. NetFront —–2.37%
4. Safari—–2.25%
5 Opera—–0.86%
6. Chrome—–0.59%
1. 1024×768 —–37.44%
2. 1280×800 —– 20.03%
3. 1280×1024 —–19.98%
4. 1440×900 —–4.64%
5. 1680×1050 —–4.05%
6. 1280×768 —–2.32%
7. 1366×768 —–1.31%
8. 240×400 —–1.07%
9. 1400×1050 —–1.02%
10. 1920×1200 —–0.95%
■地域グルメ検索サイト
1. Internet Explorer—–91.14%
—7.0 53.76%
—6.0 42.84%
—8.0 2.36%
—5.5 0.62%
—5.0 0.19%
2. Firefox—–4.38%
3. Safari—–2.81%
4. Opera—–0.83%
5. Chrome—–0.57%
6. Netscape—–0.05%
1. 1024×768 —–40.66%
2. 1280×1024 —– 20.69%
3. 1280×800 —–20.45%
4. 1440×900 —–4.01%
5. 1680×1050 —–3.91%
6. 1280×768 —–2.30%
7. 1152×864 —–1.10%
8. 1400×1050 —–1.02%
9. 1366×768 —–0.82%
10. 1920×1200 —–0.79%
■Yahoo!ショッピング 寝具ショップ
1. Internet Explorer—–86.37%
—7.0 57.87%
—6.0 37.70%
—8.0 3.93%
—5.0 0.18%
—5.5 0.18%
2. Firefox—–7.89%
3. Safari—–4.10%
5. Chrome—–0.90%
6. Opera—–0.47%
4. Netscape—–0.04%
1. 1024×768 —–36.90%
2. 1280×800 —– 19.68%
3. 1280×1024 —–17.69%
4. 1680×1050 —–5.54%
5. 1440×900 —–5.47%
6. 1920×1200 —–2.34%
7. 1280×768 —–2.23%
8. 1280×720 —–2.07%
9. 1366×768 —–1.17%
10. 1400×1050 —–0.86%
border-collapse:collapse;を指定したtableが左にズレるバグ
FireFoxでサイトを確認したとき、border-collapse:collapse; が指定されたtableが親要素から左に1pxずれるバグがありました。
原因がイマイチ分かりませんが、おそらくmozillaのバグなんでしょうね。
ここにも載ってました。
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4246
しかも解決済みだということですが、いまだに直らないってことは解決していないのでしょうか？？
それともこちらのマークアップにミスが！？
こんな構造になっていようが、
にしようが、ずれるもんはずれるんです。
結局、ボーダーをtableに指定しないで、tableをdivで囲ってあげてそのdivにボーダー指定するか、
FireFoxだけ、border-collapse:collapse; を指定しないかで解決したんですけどね。
うーん。。
FireFoxで画像置換したリンクのアウトラインが画面左に伸びる
overflow:hidden;の指定。
また、macIE5のバグ回避のため、
/*\*//*/
li.a{overflow:visible;}
/**/
とする。
liをdisplay:block;で扱う場合のIEのバグ
ナビゲーション、メニューなどのリストの作成を、liをブロック要素として並べて使う場合に、IEでは個別のliブロックの下に変な隙間が入ってしまう件について。
単純にそのブロックに横幅を指定してあげれば解決する。
htmlの書き方でliごとに改行しないなどの方法がネット上でいくつか見られたが解決に至らなかった。
別の方法として、ulに対してline-height:0;とし、liにline-height:auto;とする方法も見つかったがコレも解決にいたらず。
というわけで、今回のIEのバグは横幅指定で解決しました。
FireFox3のフルページズームに関するバグ？
親ボックス内3カラムの子ボックスをフロートで配置したレイアウトの場合に、FireFox3のフルページズームの縮小を行うと3カラム目のボックスが落ちる現象を確認。
原因をネットで探してみた中で、解決に一番近い情報が確認できたサイトが、Firefox 3 のフルページズーム使用時はスクリーン上でのピクセル量とCSS上でのピクセル量 なのだが・・・・
・親ボックスの横幅に対して、3つの子ボックスそれぞれにも横幅が指定され、合計で親ボックスの全幅となる。
・float:left; float:left; float:right; で配置。
・フルページズーム機能の縮小の場合のみ、3カラム目が下に落ちる。
とりあえず、ボックスのカラム落ちを回避した方法は・・・
子ボックスの幅をどれかひとつ数ピクセル縮める。
カラム落ちする場合の縮小したイメージをよく見ると、どうやら余白やコンテンツ幅のpx指定がうまく効いていないっぽいことでレイアウトが崩れている。
フロートの解除に関するスタイル指定のミスではなかったので・・・・
これでいいのだろうか？？
FireFox3のズーム機能で縮小するとレイアウトが崩れる
floatで配置した3カラムデザインのうち、FireFox3のズーム機能を使って（テキストのみのズームではない）一番右のカラムが下に落ちてしまった。
ボックス内の全幅は500pxとして、CSSで150px 200px 150pxと指定していた。
それぞれ、float:left; float:left; float:right;で配置していた。
どうやら縮小するとwidthの解釈がおかしくなるらしい・・・
この問題を解決するために、真ん中のカラムの幅を1px減らして199pxにしてみたら直った。
はたしてこれで問題解決になってるのだろうか？？？
ＩＥでスクロールした分だけborderが消える現象
IE6と7で、floatで配置していたboxのボーダーが、スクロールした分だけ消えていく・・・・
これはfloatで配置しているのが原因なのか、別の原因なのか？
この問題。。。
これは世間で言うところのpeek-a-booバグですね。
解決策は・・・
親のボックスに*height:1%;を指定する。
親のボックスに背景色を指定してあげる。
親のボックスにちゃんと横幅を指定する。
どれでも解決しました。
他にはfloatするboxに含まれる要素にposition:relative;を指定するというのも。
カテゴリー
- browser (22)
- Chrome (2)
- Fire Fox (12)
- Internet Explorer (13)
- webkit (1)
- css (8)
- design (1)
- History (5)
- html / xhtml (5)
- JavaScript (2)
- Links (1)
- memo (3)
タグ
confidelic-logについて
アーカイブ
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | |||||