よくある CSS のヒントと経験談 11 選

1. 画像の下にある数ピクセルの空白を削除するにはどうすればよいですか?

コードをコピー

コードは次のとおりです。

方法1:
画像{display:block;}
方法2:
画像{垂直配置:上;}
注: top値に加えて、text-topに設定することもできます。
| middle | bottom | text-bottom、または特定の <length> および <percentage> 値。方法 3:
#テスト{フォントサイズ:0;行の高さ:0;}
注: #testはimgの親要素です

2. 訪問前と訪問後にハイパーリンクの色を変え、訪問後にホバー効果とアクティブ効果を維持するにはどうすればよいですか?

コードをコピー

コードは次のとおりです。

方法：
a:link{color:#03c;}
a:訪問{color:#666;}
ホバー{color:#f30;}
a:アクティブ{color:#c30;}
注: ハイパーリンクのスタイルを LVHA の順序で設定するだけです。これは LoVe (好き) HAte (嫌い) と表記できます。

3. IE が標準モードでスクロールバーの色を設定できないのはなぜですか?

コードをコピー

コードは次のとおりです。

方法：
html{
スクロールバー-3dlight-color:#999;
スクロールバーのダークシャドウの色:#999;
スクロールバーのハイライト色:#fff;
スクロールバーの影の色:#eee;
スクロールバー矢印の色:#000;
スクロールバーの表面の色:#ddd;
スクロールバートラックの色:#eee;
スクロールバーの基本色:#ddd;
}
注: 本文に元々設定されているスクロールバーのカラースタイルをHTMLタグセレクタに定義します。

4. テキストを境界からオーバーフローさせて、折り返さずに 1 行で表示するにはどうすればよいですか?

コードをコピー

コードは次のとおりです。

メソッド: #test{width:150px;white-space:nowrap;}
注: コンテナーの幅と空白を nowrap に設定します。これは <nobr> タグと同様の効果があります。

5. テキストを境界からオーバーフローさせて省略記号として表示するにはどうすればよいですか?

コードをコピー

コードは次のとおりです。

方法 (この方法は Firefox 5.0 ではまだサポートされていません):
#テスト{幅:150px;空白:nowrap;オーバーフロー:hidden;テキストオーバーフロー:ellipsis;}
注: まず、テキストを 1 行で表示するように強制し、次に overflow:hidden を使用してオーバーフローしたテキストを切り捨て、text-overflow:ellipsis を使用して切り捨てられたテキストを省略記号として表示する必要があります。

6. 連続する長い文字列を自動的に折り返すにはどうすればよいですか?

コードをコピー

コードは次のとおりです。

メソッド: #test{width:150px;word-wrap:break-word;}
注: word-wrapのbreak-word値により、単語内での改行が可能になります。

7.ハイパーリンクの点線枠を削除するにはどうすればいいですか?

コードをコピー

コードは次のとおりです。

メソッド: a{outline:none;}
注: IE7以前のブラウザはアウトライン属性をサポートしていないため、jsのblur()メソッドを使用して実装する必要があります。例: <a
onfocus="this.blur();"...

8. 標準モードと Quirks モードのボックスモデルの違いは何ですか?

コードをコピー

コードは次のとおりです。

方法：
標準モード: 要素
幅 = 幅 + パディング + 境界線
奇妙なモード: 要素
幅 = 幅
注: 詳細については、CSS3プロパティのbox-sizingを参照してください。

9. テキストボックスで中国語入力方式を無効にするにはどうすればいいですか?

コードをコピー

コードは次のとおりです。

メソッド: input,textarea{ime-mode:disabled;}
注意: ime-mode は非標準属性です。このドキュメントの執筆時点では、IE と Firefox のみがこれをサポートしています。

10. レイヤーをfalshに表示するにはどうすればよいですか?

コードをコピー

コードは次のとおりです。

メソッド: <param
名前="wmode" 値="透明" />
注: フラッシュのwmode値を透明または不透明に設定します

11. IE で iframe の背景を透明に設定するにはどうすればよいですか?

コードをコピー

コードは次のとおりです。

方法：
iframe 要素のタグ属性を allowtransparency="allowtransparency" に設定し、iframe 内のページの body の背景色を透明に設定します。しかし、これによりIEでは他の問題も発生します。例えば、透明に設定されたiframeは選択範囲をカバーしません。

<<: Dockerでspringcloudプロジェクトをデプロイする方法

>>: CSS3 で実装された 10 種類の読み込みアニメーションから 1 つを選んで実行してみませんか?