放到 标签下，然后为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 时。
例：

CSS: #box {background-color:#eee; }
#box p {margin-top: 20px; margin-bottom: 20px; }
解決策: P オブジェクトの上下に 2 を追加します。空の div オブジェクトの CSS コード: .1{height:0px;overflow:hidden;} または DIV に border 属性を追加します。

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

CSS 互換性ポイント:

DOCTYPE は CSS 処理に影響します

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

FF: bodyの設定 テキストを揃えるとき、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 アーキテクチャを使用していますが、これもまた事実です。未熟な使い方によるものなのか、不明確な考え方によるものなのか、いくつかの問題があります。皆さんが周りを見回さないように、私が遭遇した問題のいくつかを以下に書き留めておきます^^

1. 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. スクリプトに関しては、言語属性は

< type="text/java">

に変更するだけです。 CSS スキルを理解する

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

一般に、CSS でフォ​​ント属性を設定する方法は次のとおりです。

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

font-weight:bold;

font-style:italic; ;

font-varient:small-caps;

line-height:1.5em;

font-family:verdana,sans-serif; line :

font: 太字斜体小文字 1em/1.5em ベルダナ、サンセリフ;

本当に良いです!注意点が 1 つあります。この省略方法は、font-size プロパティと font-family プロパティの両方が指定されている場合にのみ機能します。また、font-weight、font-style、および font-variant を設定しない場合は、デフォルト値が使用されるため、この点に注意してください。

2. 2 つのクラスを同時に使用する

通常、1 つの要素に対して設定できるクラス (Class) は 1 つだけですが、2 つ使用できないというわけではありません。実際、これを行うことができます:

...

P 要素にスペースで区切って 2 つのクラスを同時に与えます。各クラスのサイド属性が P 要素に追加されます。 2 つのクラスの属性間に競合がある場合は、後で設定された方が有効になります。つまり、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; margin: 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 }

このようにして、コンテナ内のすべての要素が相対的に配置されます: