DIV CSS 互換性は IE6/IE7/FF ブラウザの一般的な方法を解決し、完全に互換性があります [再版]_html/css_WEB-ITnose

Web サイトを設計するときは、さまざまなブラウザーとの CSS スタイルの互換性に注意を払う必要があります。特に、完全に DIV CSS を使用して設計された Web サイトの場合は、IE6 IE7 FF と CSS スタイルの互換性にさらに注意を払う必要があります。望ましくない影響が出る可能性があります。

すべてのブラウザの共通の高さ: 100px;
IE6 固有の高さ: 100px;
IE7 固有の高さ: 100px;

1. CSS HACK

1, ! important

IE7 の !payment のサポートにより、! important メソッドは IE6 の HACK 専用になりました (記述に注意してください。宣言位置が必要であることに注意してください)。 )

以下は引用された内容です:

3. その他の互換性に関するヒント

1. FF の下の div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要な問題を解決できます) たとえば、width:115px ! important;width: 120px;padding:5px;

!重要; が前にある必要があることに注意してください。 2. 中央揃えの問題 1) 行の高さを現在の div と同じ高さに設定し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください)。 : 0 auto; (もちろん万能薬ではありません) 3. a タグ内のコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的) 4. の理解の違いFF と IE の間で BOX を使用すると、float に設定された div に 2px の差が生じます。IE ではマージンが 2 倍になるなどの問題が発生します。FF では、ul タグにデフォルトでリスト形式とパディングが設定されています。これを回避するには、事前に宣言するのが最善です。 (ナビゲーションタグとコンテンツリストでよくあること) 6. 外部ラッパーとして、div の高さを設定しないでください。高さの適応性を実現するには、overflow: hidden を追加するのが最善です。ポインターは IE のみに適用されます。

互換性のあるコード: 最も推奨されるモードと互換性があります。 /* FF */ .submitbutton { float:left; width: 40px; margin-top: 24px; margin-right: 12px; } /* IE7 */ *+html .submitbutton { margin-top: 21px; }

ブラウザの互換性とは: 異なるブラウザ (Firefox IE7 IE6) を使用して同じ Web サイトまたはページにアクセスすると、いくつかの問題が発生します。正常に表示されるものもあれば、異常に表示されるものもあります。CSS を作成するときに非常にイライラします。このブラウザの問題は解決しましたが、別のブラウザでは新たな問題が発生しています。互換性は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に作成できるようにする方法です。今では調和が生まれています。ふふ！
Microsoft が最近リリースした IE7 ブラウザの互換性は、確かに一部の Web ページ作成者にとって大きな負担となっています。IE7 は標準化されましたが、FF とはまだ多くの違いがあるため、IE7 との互換性を使用する必要があります。 少し論理的思考ができる人なら、IE と FF の互換性を併用できることがわかるでしょう。たとえば、次の 3 つの互換性オプションがあります: (初心者に適しています (笑)、専門家はここで終了します。)
プログラム コード
1 つ目は互換性があり、IE FF はすべてのブラウザに共通です (実際には互換性があるとはみなされません) height:100px; 2 つ目は IE6 のみと互換性があります_height:100px; 3 つ目は IE6 IE7 と互換性があります common*height:100px ;
これら 3 つの互換性を紹介した後、スタイル内の各属性に対する IE6 IE7 FF 固有の互換性を定義する方法を見てみましょう。順序は間違っていません。 *height:120px; _height:150px;
以下では、各ブラウザがこれら 3 つの属性をどのように理解するかを簡単に説明します。
FF では、2 番目と 3 番目の属性は認識されないため、IE7 では、height:100px と読み取られます。 3 番目の属性は IE7 では認識されないため、最初と 2 番目の属性を読み取り、2 番目の属性が最初の属性をカバーするため、IE7 は最終的に 2 番目の属性を読み取ります *height:120px; IE6 では、3 つの属性すべてが IE6 はい、すべて3 つの属性を読み取ることができ、3 番目の属性は最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。

1 Firefox ie6 および ie7 用の CSS スタイル。現在、ほとんどの場合、ハッキングに ! important が使用されていますが、ie6 および Firefox のテストでは、正常に表示できます。これにより、ページが表示されなくなります。必要に応じて表示されます！ 「*+html」を使用した IE7 用の優れたハックを見つけました。これで IE7 で閲覧できるようになりました。問題はありません。 次のような CSS を記述します:

以下は引用された内容です: #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+ html #1 { color: #999 } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题 主要的样式定义如下：

body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明： 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div， 只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度， 正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个， 而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类： 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;} 或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持， 所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键} HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或paddign 时。例：

p对象中的内容

CSS:
#box {background-color:#eee; } #box p {margin-top: 20px; margin-bottom: 20px; }
解決策: P オブジェクトの上下に 2 を追加します。空の div オブジェクトの CSS コード: .1{height:0px;overflow:hidden;} または DIV に border 属性を追加します。
IE ブラウザをブロックします (つまり、IE では表示されません) *:lang(zh) select {font:12px ! important;} /*FF、OP に表示されます*/ select:empty {font:12px ! important; } } /*safari Visible */ ここで select はセレクターであり、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。
IE7 でのみ認識 *+html {…} IE7 専用のスタイルを作成する必要がある場合に、この互換性を使用できます。
IE6 以下の認識 * html {…} ここに特に注意してください。多くのオーナーが IE6 と互換性があると書いています。実際、IE5.x もこの互換性を認識します。他のブラウザでは認識されません。 html/**/ >body select {……} この文は前の文と同じ効果があります。
IE6のみ認識しません select { display /*IE6は認識しません*/:none;} ここでの主な目的は、コロンの前に解放される CSS コメントを通じて属性と値を分離することです。
IE6 と IE5 のみ select/**/ { 表示 /*IE6、IE5は認識しません*/:none;} 上記の文との違いは、セレクターと中括弧の間に追加の CSS コメントがあることです。
IE5 だけが認識しない select/*IE5 が認識しない*/ { display:none;} この文は、前の文から属性領域のコメントを削除したものです。 IE5 のみがボックス モデル ソリューションを認識しません。 select {width:IE5.x width; voice-family:""}""; voice-family:inherit; width:correct width;} ボックス モデルのクリア方法が使用されていません。加工された。これは明確にする必要があります。
フローティングをクリアする select:after {content:"."; display:block; height:0; clear:both; Visibility:hidden;} Firefox では、子がすべてフローティングの場合、親の高さを完全にラップすることはできません。子全体を定義し、この明確な浮動互換性を使用して親を一度定義すると、この問題は解決されます。
切り捨て省略記号 select { -o-text-overflow:ellipsis; text-overflow:ellipsis;white-space:nowrapoverflow:hidden; } これにより、長さを超えた余分なテキストが自動的に切り取られ、省略記号の終わりは良い技術。 Firefox が現在サポートしていないだけです。
Opera でのみ認識 @media all and (min-width: 0px){ select {……} } Opera ブラウザーについては別途設定を行ってください。
上記は、CSS を記述する際の互換性の一部です。正しいタグのネスト (div ul li のネストされた構造関係) に従うことをお勧めします。これにより、互換性を使用する頻度が減り、1 つのページに は必要ありません。多くの場合、互換性がなくてもブラウザは正常に動作します。互換性のあるコンテンツを分離したい場合は、以下のフィルタをいくつか試してください。 。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。
IE5.x 用のフィルター、IE5.x のみが表示されます @media tty { i{content:"";/*" "*/}} @import 'ie5win.css';} }/* */
IE5/MACフィルターは基本的に不要 /**//*/ @import "ie5mac.css"; /**/
以下はIEの条件コメントを使用した方が完璧だと個人的には思います。対応する互換性を呼び出すためのソリューションです。互換性が必要な部分を別のファイルに配置します。これは、非常に使いやすいだけでなく、互換性のあるスタイルを呼び出すこともできます。 CSS 自体を作成する際にも役立ちます。一般に、CSS を作成する場合、互換性を含むすべてのコードを CSS ファイルに記述すると、互換性を使用する必要があるかどうかをより厳密に観察できます。と、いくらでも互換性を持たせることができるので、CSSとの互換性を持たせる必要があるのか​​、それとも本体のCSSで調整する必要があるのか​​を無意識に考えてしまいます。互換性があると、多くのブラウザが非常に優れたものになり、達成感を感じますか?~ (笑) IE の if 条件は互換性があり、柔軟に使用できます。この IE 条件コメント IE のみ すべての IE が認識可能
IE5.0 のみが認識可能 IE 5.0+ IE5.0 のみが IE5.5 で認識可能
IE6 のみが認識可能 IE 7/- IE6 と IE6 未満の IE5.x のみが認識可能IE 7 のみ /- IE7 でのみ認識されます
CSS に特定のルールに従わないものがたくさんあると、非常にイライラするでしょう。ただし、多くの互換性と多くの !重要な機能を通じて制御できます。長い目で見ると、多くの優れた Web サイトを見るのは非常に気が進まないのですが、これらの Web サイトでは、IE6、Ie7、Firefox、さらには Safari や Opera さえも完璧に動作します。一見複雑なテンプレートは、実際には不調和なものではないことを知っておく必要があります。互換性のある方法を見つけても、すべてを習得したとは思わないでください。
div ul li
のネスト順序。今天只讲一个规则。就是

• 的三角关系。我的经验就是
  在最外面，里面是

  ，然后再是
  • ，当然
  • 里面又可以嵌套
    什么的，但是并不建议你嵌套很多东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是

    里面放
  • ，而不用
    的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。
    具体嵌套写法
    遵循上面得嵌套方式，
    次に、CSS で ul {Margin:0px;Padding:0px;list-style:none;} を指定します。list-style:none により、ドットや数字などのディレクトリ タイプが
    • タグの前に表示されなくなります。 IEとFirefoxで表示されるデフォルトの効果が若干異なるためです。したがって、何も工夫する必要はありません。IE6、IE7、Firefox で表示される内容 (外側の余白、間隔、高さ、幅) にほとんど違いはありません。注意すれば、アイコンの品質には違いがありますが、表示を制御するために大きな CSS を調整する必要はなく、通常は 1 つまたは 2 つの場所にのみ対応します。この互換性はさまざまな場所に適用できます。さまざまな場所でさまざまな互換性メソッドを繰り返しデバッグする必要がありますか? ul.class1、ul.class2、ul.class3 {xxx:xxxx} を使うと互換させたい箇所を簡単に振り分けて互換させることができます。 Div+CSS メソッドではほぼ無制限にネストすることができますが、上記のルールに従えば、よりリラックスして、半分の労力で 2 倍の結果が得られます。

      6. CSS 互換性ポイントの分析 IE と FF

      CSS 互換性ポイント:

      DOCTYPE は CSS 処理に影響します

      FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されますが、IE は中央に配置できません実行してください

      FF: text-align が本文に設定されている場合、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります

      FF: パディングを設定した後、div の高さが増加します! important はサポートされていますが、IE ではサポートされないため、それを使用する必要があります。 ! important 追加の高さと幅を設定します

      FF: ! important はサポートされていますが、IE はそれを無視します。 ! important を使用して FF のスタイルを特別に設定できます

      。 div の垂直方向の中央揃えの問題:vertical-align:middle; DIV 全体と同じ行間隔に増やします。 line-height: 200px; 次にテキストを挿入すると、垂直方向の中央揃えになります。欠点は、ラップせずにコンテンツを制御する必要があることです

      cursor: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ使用できます

      FF: リンクに境界線と背景色を追加するには、改行がないようにするには、display: block と float: left を設定する必要があります。メニューバーに関して言えば、メニューバーの高さを設定することは、下端の表示のズレを避けるためです。高さが設定されていない場合は、メニューバーにスペースを挿入することができます

      には多くの利点があります。 XHTML+CSS アーキテクチャを使用していることも事実ですが、未熟な使い方によるものなのか、不明確な考え方によるものなのか、いくつかの問題があります。皆さんが周りを見回さないように、以下に私が遭遇した問題のいくつかを書き留めておきます。 mozilla Firefox と IE における BOX モデルの説明 不一致により 2px の差が生じます。 解決策:

      div{margin:30px! important;margin:28px;}

      これら 2 つのマージンの順序を逆にしてはいけないことに注意してください。 Ajie 氏によると、! important 属性は IE では認識できませんが、他のブラウザーでは認識できるそうです。実際、IE では次のように解釈されます:

      div{maring:30px;margin:28px}

      定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx と書くことはできません!重要;

      2、IE5 および IE6 IE5 では、BOX の解釈に一貫性がありません。 div{width:300px;margin:0 10px 0 10px;} の幅は、300px-10px (右パディング)-10px (左パディング) として解釈されます。最終的な div の幅は 280px ですが、IE6 の他のブラウザでは、幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます

      div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

      、これについて/**/ IE5 と Firefox がサポートしていることしかわかりませんが、IE6 はサポートしています。そうではありません。誰かが理解している場合は、教えてください、ありがとう！ :)

      3. Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持つため、最初に定義してください

      ul{margin:0;padding:0;}

      でほとんどの問題を解決できます。

      4. スクリプトに関しては、CSS スキルでは言語属性はサポートされていません

      1. CSS のフォント属性の省略規則

      一般的に、CSS でフォ​​ント属性を設定する方法は次のとおりです。 : font-weight:bold;font-style:italic;font-varient:small-caps;

      font-size:1em;
      line-height:1.5em;
      font-family:verdana,sans-serif;

      但也可以把它们全部写到一行上去：

      font: bold italic small-caps 1em/1.5em verdana,sans-serif;

      真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

      2、同时使用两个类

      一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

      …

      同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

      补充：对于一个ID，不能这样写

      …

      也不能这样写

      3、CSS border的缺省值

      通常可以设定边界的颜色，宽度和风格，如：

      border: 3px solid #000

      这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

      如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

      4、CSS用于文档打印

      许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

      也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

      第1行就是显示，第2行是打印，注意其中的media属性。

      但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

      5、图片替换技巧

      一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

      比如你想整个卖东西的图标，你就用了这个图片：

      

      这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

      Buy widgets

      但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

      h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

      注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

      6、CSS box模型的另一种调整技巧

      这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

      #box { width: 100px; border: 5px; padding: 20px }

      这样调用它：

      …

      这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

      但用CSS也可以达到同样的目的，让它们显示效果一致。

      #box { width: 150px } #box div { border: 5px; padding: 20px }

      这样调用：

      …

      この方法では、どのブラウザであっても、幅は 150 ポイントになります。

      7. ブロック要素を中央に配置します

      固定幅の Web ページを作成し、Web ページを水平方向に中央揃えにしたい場合は、通常次のようにします。
      #content { width: 700px; 0 auto }
      すべての要素を囲むには < ;div id="content"> を使用します。これは単純ですが十分ではなく、IE6 より前のバージョンではこの効果が表示されません。 CSS を次のように変更します。
      body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
      これにより、Web ページのコンテンツが中央に配置されるため、

      を追加しますコンテンツ

      text-align: left 。
      8. CSS を使用して垂直方向の配置を処理します

      垂直方向の配置は、表の単位をvertical-align: middle に設定するだけで簡単に実現できます。しかし、これは CSS では役に立ちません。ナビゲーション バーの高さを 2em に設定し、ナビゲーション テキストを垂直方向の中央に配置したい場合、この属性を設定しても役に立ちません。

      CSSメソッドとは何ですか?ちなみに、これらの単語の行の高さを 2em に設定します: line-height: 2em これで完了です。

      9. コンテナ内での CSS の配置

      CSS の利点の 1 つは、コンテナ内であっても要素を任意に配置できることです。たとえば、このコンテナの場合:

      #container {position:relative }

      このようにして、コンテナ内のすべての要素は次のように使用できます:

      …

      もちろん、次のようにすることもできます:

      margin: 5px 0 0 30px

      4 つの数字の順序は上、右、下、左であることに注意してください。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。

      10. 画面の下部に直接表示される背景色

      垂直方向の制御は CSS の機能を超えています。ナビゲーションバーをコンテンツバーのようにページの一番下に直接移動させたい場合は、テーブルを使用するのが非常に便利ですが、次のようにCSSのみを使用する場合は次のようになります。 }

      ナビゲーションバーが短くなりました 真っ直ぐ下に行くのではなく、コンテンツが途中で終わった時点で終了します。それについて私たちは何ができるでしょうか？

      残念ながら、チートする唯一の方法は、列幅と同じ幅で短い列に背景画像を追加し、設定された背景色と同じ色にすることです。

      body {background: url(/blog/blue-image.gif) 0 0repeat-y }

      現時点では em を単位として使用することはできません。その場合、リーダーがフォント サイズを変更すると、トリックはpxのみ使用可能です。