CSS詳細集(2)_html/css_WEB-ITnose

1. IE6 以下では、a タグの外側の :hover 疑似クラスが認識されません。解決策:

#show li.s1 { border:1px Solid #ff9900; Background:#454242;}

#show li.s2{ border:1px Solid #D9D8D8; background:#312E2E;}

2. 要素

に hasLayout を設定しますIE6 (または IE7) の多くは、 hasLayout 値を設定することで解決できます。要素の hasLayout 値を設定する最も簡単な方法は、CSS の高さまたは幅を追加することです (もちろん、ズームを使用することもできますが、これはできません)。 CSSの一部）。たとえば、高さ:1% に設定します。親要素が高さを設定していない場合、要素の物理的な高さは変更されませんが、要素にはすでに hasLayout 属性があります。

3. IE6 で文字が繰り返し表示されます

フローティング要素が display:inline; に設定されていることを確認してください

フロントエンド UI 共有で margin-right:-3px を使用してください

4. スタイルの優先順位

1. インラインスタイル [1.0.0.0]

2. ID セレクター [0.1.0.0]

3. クラス、属性、疑似クラスセレクター [0.0.1.0]

4. 要素ラベル、疑似要素セレクター [0.0.0.1]

5. 要素を縦方向中央揃えにするCSSの書き方

.Code

#exm{

position:absolute

left:50%;
Zインデックス:1;
幅: 200px;
高さ: 100px;
;
6. ズーム: 通常 | number
オブジェクトのスケーリングを設定または取得します。レンダリングされたオブジェクトでこのプロパティの値を設定または変更すると、周囲のオブジェクトのコンテンツがリフローされます。このプロパティは継承可能ではありませんが、オブジェクトのすべての子に影響します。フロントエンド UI 共有
7. 画像とテキストが並んでいる場合、画像テキストの垂直方向の中央揃えを実現するには:
11. line-height: を画像の高さ、または画像の親要素の高さに設定します。

次に、画像の CSS をvertical -align:middle;

8. li 要素に img 要素が含まれる場合、IE6 の下に空白が表示されます

解決策 1:

li を float にして設定しますimg をブロックレベルの要素として設定する

解決策 2:

ul: 0;

のフォントサイズを設定する

解決策 3:

img の垂直方向の配置を設定する:bottom;

解決策 4 :

img の margin-bottom を設定します: -5px;

9. クリックされたハイパーリンク スタイルにホバーがなくアクティブになりました

解決策: CSS 属性の並べ替え順序を変更します: L-V-H-A

10. 連続した長いフィールドは使用できません自動的に FF で折り返す

解決策:

.Code

div{word-wrap:break-word;overflow:hidden;}

11の下の親コンテナの高さ。 FF は適応できません

解決策: 子要素のフローティングをクリアします

12. IE では画像の下に隙間があります

解決策:
img を display:block として定義するか、またはvertical-align を top/bottom/middle/ として定義しますtext-bottom

親コンテナのフォントを定義します サイズはゼロ、font-size: 0 13. IE6 では、浮動要素とその隣接する非浮動要素の間に 3 ピクセルのギャップがあります

解決策:

隣接する非浮動要素も float に設定されます。

浮動要素は IE6 _margin-right: -3px; に対して定義されます

14. LI コンテンツが長すぎると省略記号で表示されます

解決策: ホワイトスペース: nowrap; (テキストは折り返されません) text-overflow:ellipsis; -o -text-overflow:ellipsis; overflow: hidden;

解決策: 行の高さとコンテナーの高さは同じですheight=height;

16. テキスト入力ボックスと隣接するテキストを整列させることができません

解決策: フロントエンド UI 共有を設定します

17. IE はスクロール バーのスタイルを設定します

解決策:

.コード

1. body{
2. スクロールバーの色:#fff;
3. スクロールバーの色:#eeeeee; Arrow-Color：000;解決策:
.Code
div{
overflow:hidden;
line-height:1px;