17個のCSSテクニック

<#div id=”imfloat”>
   css 
#imfloat{
float:left;
margin:5px;/*IE    10px*/
display:inline;/*IE     5px*/}

#box{ float:left; width:100px; margin:0 0 0 100px; //      IE   200px    display:inline; //     }

#box{ display:block; //              display:inline; //           diplay:table;

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

をラベルの下に置き、divにクラスを指定してCSSを設計します.

#container{ min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}

最初のmin-widthは正常です.しかし、2行目のwidthはJavascriptを使用しており、これはIEだけが認識しているので、HTMLドキュメントがあまり正規ではありません.実際にJavascriptの判断で最小幅を実現します.
6.DIVフローティングIEテキストは3画素のバグを発生する
左のオブジェクトは浮動し、右は外パッチの左ピッチで位置決めされ、右のオブジェクト内のテキストは左から3 pxのピッチがある.

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //     }
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>

7.IE鬼ごっこの問題
divが複雑に適用されると各欄にいくつかのリンクがあり、DIVなどの場合は鬼ごっこの問題が発生しやすい.
一部のコンテンツは表示されず、マウスがこの領域を選択すると、コンテンツがページにあることがわかります.解決策:layoutに対してline-heightプロパティを使用するか、layoutに固定高さと幅を使用します.ページ構造はできるだけ簡単です.
8.floatのdiv閉鎖;フローティングをクリアします.てきおうこうど
①例えば、<#div id="floatA"><#div id="floatB"><#div id="NOTfloatC">ここでのNOTfloatCは、並進を続けるのではなく、下に並ぶことを望んでいる.(floatA、floatBのプロパティがfloat:leftに設定されています.)
このコードはIEで問題なく、FFに問題があります.なぜなら、NOTfloatCはfloatタグではなく、floatタグを閉じる必要があるからです.<#div class="floatB"><#div class="NOTfloatC">の間に<#div class="clear">というdivを付けるには、位置に注意しなければなりません.また、float属性を持つ2つのdivと同級でなければなりません.ネスト関係は存在しません.そうしないと、異常が発生します.clearというスタイルは、以下のように定義すればよい.clear{ clear:both;}
②外部wrapperとしてのdivは高さを固定しないで、高さを自動的に適応させるためにwrapperにoverflow:hiddenを加える.floatのboxが含まれている場合、高度自動適応はIEの下で無効になります.この場合、IEのlayoutプライベート属性(万悪のIEですね!)をトリガーすべきです.zoom:1;これで互換性が得られます.
たとえば、wrapperは次のように定義されます.

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③レイアウトについて、私たちが最も多く使っているcssの説明はfloat:leftかもしれません.n欄のfloat divの後ろに統一的な背景を作る必要がある場合があります.例えば、

<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>

例えば、pageの背景を青に設定して、すべての3つの欄の背景色を青にするのが目的ですが、left center rightが下に伸びるにつれて、pageが高度に保存されていないことがわかります.問題は、pageがfloat属性ではなく、私たちのpageが中央にあるため、floatに設定できないためです.

<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>

更に1つのfloat leftを埋め込んで幅が100%のDIVで解決します
④万能float閉鎖(非常に重要!)
clear floatの原理については[How To Clear Floats Without Structural Markup]を参照し、以下のコードをGlobal CSSに加え、閉じる必要があるdivにclass="clearfix"を加えればよい、しばしば不快である.

/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

または、以下の設定を行う.hackbox{display:table;//オブジェクトをブロック要素レベルのテーブルとして表示}
9.高度不適応
高さ不適応とは、特に、内層オブジェクトがmarginまたはpaddignを使用する場合、内層オブジェクトの高さが変化すると、外層の高さが自動的に調整されないことである.
例:

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p      ＜/p>
</div>

解决テクニック:Pオブジェクトの上下に2つの空のdivオブジェクトCSSコードを追加する:.1{height:0 px;overflow:hidden;}またはDIVにborderプロパティを追加します.
10 .IE 6の下でなぜ画像の下に隙間があるのか
このバグを解決するテクニックもたくさんあります.htmlのレイアウトを変更したり、imgをdisplay:blockに設定したり、vertical-align属性をvertical-align:topに設定したりすることができます.
bottom middle text-bottomはすべて解決することができます.
11.テキストとテキスト入力ボックスの位置合わせ方法
vertical-align:middleを加える.

<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>

12.web標準でidを定義するのはclassと何か違いがありますか?
一.Web規格では重複IDは許されない、例えばdiv id="aa"は2回の重複は許されないが、classはクラスを定義し、理論的には無限に重複することができ、このように複数回参照する定義が必要であれば彼を使用することができる.
二.属性の優先度の問題
IDの優先度はclassより高いので、上記の例を見てください.
三.JSなどのクライアントスクリプトを便利にして、ページの中であるオブジェクトに対してスクリプト操作を行うならば、彼に1つのIDを定義することができて、さもなくばページ要素を遍歴して特定の属性を指定してそれを見つけることしかできなくて、これは相対的に時間の資源を浪費して、1つのIDよりはるかに簡単です.
このテクニックはIEとOPブラウザに適用されます.

<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>

14.なぜweb規格でIEがスクロールバーの色を設定できないのか
解決策はbodyをhtmlに変えることです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

15.なぜ1 px程度の高さの容器を定義できないのか
IE 6ではこの問題はデフォルトの行高によるもので、overflow:hidden zoom:0.08 line-height:1 pxなど、解決策もたくさんあります.
16.FLASH上にレイヤーを表示するにはどうすればいいですか
解決策はFLASHに透明度を設定することです

<param name="wmode" value="transparent" />

17.ブラウザで階層を垂直方向に中央に配置する方法
ここでは、パーセンテージ絶対位置決めを使用して、外部パッチの負の値とテクニックを使用します.負の値の大きさは、その幅の高さを2で割ったものです.

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>