No.2ベストアンサー
- 回答日時:
こんにちは。
IE6の有名なバグです。
background: #FFFFFF url(images/bg.jpg) no-repeat fixed center top;
を、仮にbodyに適用したとすると、
body {
background: #FFFFFF url(images/hoge.jpg) center hoge hoge;
padding-left: 1px;
}
と、強引に反対側に1ピクセルずらしてやればOKなのですが、
当然のごとくIE以外のブラウザでは逆に左に1ピクセルずれてしまいます。
そこで、スマートなやり方ではないのですが、ハックを利用します。
このバグは仰るとおりIE7でも生じるので、
body {
background: #FFFFFF url(images/hoge.jpg) center hoge hoge;
}
/* ↓IE6以下に適用 */
* html body {
padding-left: 1px;
}
/* ↓IE7に適用 */
*+html body {
padding-left: 1px;
}
ハックの使用は出来る限り避けたいのですが。。
たかが1ピクセル、されど1ピクセルですよね(笑
参考URL:http://www.lucky-bag.com/archives/2006/06/css-ha …
No.1
- 回答日時:
ブラウザにスクロールバーがつかない場合だとずれた記憶があったような。
仮に、
左から余白10px、赤ベタ300px、余白10pxの背景画像(合計320px)をセンタリングする場合は
赤ベタ部分を右に1px増やして301pxの幅に、一番右の余白を1px増やして11pxに。(合計321pxの画像)
私はこんな感じで対処したような・・・。
あやふやな記憶ですし、どのようなページ構成/背景画像を利用されるのか、わからないので、時間があったら参考にやってみてください。
ダメだったらごめんなさい。
参考URL:http://norisfactory.com/stylesheetlab/000010.php
この回答へのお礼
お礼日時:2007/11/09 18:25
お返事ありがとうございます。
CSSハック(*:first-child+html)でmargin-left: 1px;を指定して、
とりあえず、正常表示されるようになりました。
※でも、お気に入り表示・非表示・幅拡大などをすると不安定なようです。
参考URLの方も参考にしてみます。
とりあえず、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- Gmail Gメールの受信トレイの表示が変わって、戸惑っています 1 2023/04/04 17:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
W3Cのソースコードの検証サービ...
-
CSS、width100%でもできる余白
-
widthやheightの数値に単位(px...
-
CSSで3分割した背景画像を配置...
-
z-indexで上になっている要素だ...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
div内に外部のurlを表示させたい
-
CSS上での計算を行うためのルー...
-
form input テキストを上下中央...
-
CSSでborderの長さを指定、また...
-
<li>の黒い点を消したい。
-
FC2ショッピングカート 写真の...
-
border-style:solidで文字がずれる
-
CSSでborderの指定を解除する記...
-
CSSがなぜかfont-sizeだけ効か...
-
WEBサイト作成:初心者です...
-
画像リンクの下に文字を付けた...
-
CSSと<dl><dd>で間隔をあけて1...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報