DIV CSS 互換性は、IE6/IE7/FF ブラウザーの完全な互換性を解決するための一般的な方法です (転送)_html/css_WEB-ITnose。

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

すべてのブラウザに共通
高さ: 100px;

IE6 のみ
_height: 100px;

IE6 のみ
*+height: 100px; FF
身長: 100px ! important;


1. CSS HACK

1, ! important

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

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

注:
*+html IE7 の HACK は次のことを確認する必要がありますHTML の先頭に次のステートメントがあることを確認します。

-//W3C//DTD HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/ loose.dtd”> 2. ユニバーサルフロートクロージャ

クリアフロートについて 原理は[構造マークアップなしでフロートをクリアする方法]を参照してください
次のコードをグローバルCSSに追加し、class="clearfix"を追加しますdiv を閉じる必要があります。これは試行およびテストされています。

以下は引用された内容です: < ;style>

/* Clear Fix */.clearfix:after

{
content:”.”;

display:block;height:0;clear:both;

visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* IE Mac から非表示にする */
.clearfix {display: block;}
/* IE Mac からの非表示終了 */
/* Clearfix の終了 */
> ;

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

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

!重要; が前にある必要があることに注意してください。
2、中央揃えの問題。
1) line-height を現在の div と同じ高さに設定し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください)。 margin: 0 auto; (もちろん万能薬ではありません)
3. a タグのコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的)。 FF と IE の間の BOX の理解では、float に設定された div は、IE では二重マージンなどの問題を抱えています。
5 では、ul タグはデフォルトでリスト形式とパディングを持っています。不必要なトラブルを避けるために、事前に設定しておいてください (ナビゲーションタグとコンテンツリストでよくあることです)
6. 高さの適応性を実現するために、div の高さを追加することをお勧めします。ハンドカーソル: ポインタ。

互換性のあるコード: 最も推奨されるモードと互換性があります。
/* FF */

.submitbutton {

幅: 40px;
高さ: 24px;
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;

ブラウザの互換性とは: 異なるブラウザを使用する場合 (Firefox IE7) IE6) 同じWebサイトやページにアクセスすると、正常に表示されるものもあれば、異常に表示されるものもあり、ブラウザに問題があったため修正しました。別のブラウザで新たな問題が発生しました。互換性は、CSS 内でさまざまなブラウザをサポートするスタイルを個別に作成できるようにする方法です。今では調和が生まれています。ふふ！

Microsoft が最近リリースした IE7 ブラウザの互換性は、確かに一部の Web ページ制作者にとって大きな負担となっています。IE7 は標準化されましたが、FF とはまだ多くの違いがあるため、IE7 との互換性を使用する必要があります。
少し論理的思考ができる人なら、IE と FF の互換性を一緒に使用できることを知っているでしょう。たとえば、次の 3 つの互換性オプションがあります: (初心者に適しています。笑、専門家はここを通り過ぎます。)

プログラム コード

1 つ目は互換性があり、IE FF はすべてのブラウザーに共通です (実際には互換性はないと考えられます)
height:100px; 2 つ目は IE6 のみと互換性があります
_height:100px; 3 つ目は IE6 と互換性があり、IE7 と共通です
*height:100px;

はじめにこれら 3 つは互換性があるので、スタイル内の属性に対して IE6 IE7 FF 固有の互換性を定義する方法を見てみましょう。以下のコードを見てください。
プログラムコード

height:100px;
*height:120px;
_height:150px;

FFでは、FFは2番目と3番目の属性を認識しません。 height: 100px; を読み取ります

IE7 では、3 番目の属性が認識されないため、2 番目の属性が最初の属性をカバーするため、IE7 は最終的に 2 番目の属性を読み取ります。

IE6 では、3 つの属性をすべて認識できるため、3 番目の属性が最初の 2 つの属性を上書きするため、IE6 は最終的に 3 番目の属性を読み取ります。


1 Firefox ie6 および ie7 用の CSS スタイル
現在、ほとんどの場合、ハッキングに ! important が使用されており、ie6 および Firefox のテストでは正常に表示できますが、
ただし、ie7 は ! important を正しく解釈できるため、ページが表示されなくなります。必要に応じて表示されます！ 「*+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 第一个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; text-align:center; }空の div オブジェクトの CSS コードを上下に 2 つ追加します: .1{height:0px;overflow:hidden;} または、div に border 属性を追加します。

IE ブラウザをブロックします (つまり、IE では表示されません)
*:lang(zh) select {font:12px !重要;} /*FF, OP 表示*/
select:empty {font:12px ! important;} /*Safariで表示*/
ここがセレクターなので状況に応じて変更してください。 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 のみが

Box モデル ソリューション
selct {width:IE5 を認識しません。!処理することが重要です。これは明確にする必要があります。

float をクリアします
select:after {content:"."; display:block; height:0; clear:both; Visibility:hidden;}
子がすべてフローティングになっている場合、親の高さは子全体を完全にラップすることは不可能であり、この明確な浮動互換性を使用して親を一度定義すると、この問題は解決できます。

切り捨て省略
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との互換性を持たせるべきか、調整を先にするべきかを無意識に考えてしまいます。互換性を最小限に抑えて、多くのブラウザを非常に従順にするとき、この IE 条件メモを参照してください。使用可能
IEのみ
すべてのIEが認識可能

IE5.0のみが認識可能
IE5.0+のみが認識可能
IE5.0はIE5.5を置き換え可能

IE6のみが認識可能
IE7/-のみが認識可能
IE6で認識可能IE6以下のIE5.x
IE 7/-のみ
IE7のみ認識可能

CSS に特定のルールに従っていないものがたくさんあると、非常にイライラするでしょう。多くの互換性と ! important を使用して制御することはできますが、長期的には非常に気が進まないことになるでしょう。 CSS によって IE6、Ie7、Firefox、さらには Safari や Opera さえも完璧に動作する優れた Web サイトを羨ましく思いませんか?そして、一見複雑なテンプレートは互換性をほとんど使用していません。実際、IE と Firefox はそれほど不調和なものではなく、これらを調和して共存させる特定の方法を見つけることができることを知っておく必要があります。互換性のある方法を見つけたら、すべてをマスターしたことになるとは考えないでください。私たちは互換性の奴隷ではありません。

div ul li のネスト順序

今日は 1 つのルールだけを説明します。

• の三角関係です。私の経験では、
  が外側にあり、

  が内側にあり、
  を

  内にネストすることはお勧めできません。たくさんのものを詰め込みます。このようなルールに従うと、

  の代わりに
  • を内側に置くだけで、不運で不従順なギャップが発生しなくなります。通常の状況では、IE6 と IE7 には、何もないところからさらに多くのギャップが生じます。しかし、多くの場合、次の行に進むと隙間は消えますが、前の内容は空になっています。この場合、IE の Margin を変更し、Firefox で Padding を調整すると、両方が表示されるようになります。効果は非常に似ていますが、CSS が非常に臭くなり、この問題に対する可能な解決策をさらに考える必要があります。それらすべてと互換性があることはわかっていても、死ぬほどイライラすることになります。
    
    具体的なネストの書き方
    
    上記のネスト方法に従い、
    を CSS で指定します。 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: 本体の設定 テキストを揃えるとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります

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

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

    の垂直方向のセンタリングの問題。 div:vertical-align:middle; 行間隔を DIV 行全体と同じ高さに増やします -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 の BOX 解釈は矛盾しています。IE5 では div{width:300px;margin:0 10px 0 10px;} の幅は 300px-10px の最終 div の幅として解釈されます (右パディング)。 -10px (左パディング) は 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. スクリプトに関しては、言語属性は

    に変更するだけです
    7、10 のことCSS スキルを知らないかもしれません
    1. CSS フォント属性の省略規則
    一般的に、CSS でフォ​​ント属性を設定する方法は次のとおりです:
    以下は引用された内容です: font-weight:bold;font-style:italic ;font-variant:small-caps;

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

    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のみ使用可能です。

    この記事は http://shenxiaolei.iteye.com/blog/469060 から転載されました

    font-size:1em;

    line-height:1.5em;

    font-family:verdana,sans-serif;