互換性と経験のまとめ

2295 ワード

1、
フローティング時に親要素を開くことができません
ソリューション:グローバルにスタイルを追加
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}
親要素呼び出しclearfix
フィルタPNGピクチャを使用して透明にすると、コンテナ内のリンクが無効になります
理由:フローティング、アノテーション、アスペクト定義
解決策:容器の中のaに_を追加しますposition:relativeスタイルrelativeすたいる
imgピクチャの下にいくつかのピクセルギャップが表示されます
ソリューション:img{display:block;}またはimg{vertical-align:top;}またはimg{font-size:0}
テキストをテキスト入力ボックスに垂直に配置するにはどうすればいいですか?
ソリューション:input{vertical-align:middle;}
コンテナ内で単行テキストを垂直に中央に配置するにはどうすればいいですか?
解決策:テキストの行の高さがコンテナの高さに等しいように設定します.例:height:25 px;line-height:25px;
強制テキストオーバーフロー1行表示
ソリューション:コンテナの幅とwhite-space:nowrapを設定する
テキストオーバーフロー境界を省略記号として表示する方法
解決策:コンテナの幅を設定し、テキストの行表示を設定し、オーバーフローカットして省略記号を表示します.例:
.test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

各ブラウザのopacity透明性の問題
.test {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}
 
        

让连续的长字符串自动换行

解决方案: word-wrap:break-word;

去掉超链接的虚线框

解决方案:

a {outline:none;blr:expression(this.onFocus=this.blur());}

Webページの水平方向中央
ソリューション:
body{text-align:center;} .wp{width:980px;margin:0 auto;text-align:left;}

tableフレームを1ピクセル細くする方法
ソリューション:
table{border-collapse:collapse;}
table th,table td{border:1px solid #ddd;}

Webページは色を消して、ウェブサイトに灰色を表示させます
ソリューション:
*{filter:gray; color:gray;}
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

2つの隣接するブロックレベル要素は、marginが設定されており、間隔は最大1つしかなく、間隔は加算されません.
原因:この現象を「外距離マージ」と呼び、2つの間隔が隣接して大きくなります.この現象は親子要素にも現れます.
注意:フローティング要素と絶対位置決め要素は、隣接する要素と外距離のマージを生成しません.インラインブロックレベルの要素間では、外部距離のマージは発生しません.ルート要素間ではhtmlとbodyの間などの外距離のマージは発生しません.プロパティoverflowが設定されており、visibleではないブロックレベルの要素は、そのサブ要素と外距離でマージされません.