ホームページ > 記事 > ウェブフロントエンド > CSS の互換性の問題といくつかの一般的な問題の概要_html/css_WEB-ITnose
CSS の互換性の問題といくつかの一般的な問題の概要_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:59:181054ブラウズ
現在、主流のブラウザの互換性は比較的良好です。この記事では主に IE6 と 7 の非互換性の問題を解決することに焦点を当てます。
1.フローティングがある場合、計算は正確である必要があり、IE6 では、コンテンツの幅と高さが設定された幅と高さを超えないようにしてください。
解決策: 対応する親に overflow:hidden を追加します。ただし、一部の部分は非表示になりますので、設定する前に幅と高さを正確に計算することをお勧めします
例: (つまり、伸びます)
1 <style> 2 .box{ width:400px;} 3 .left{ width:200px;height:300px;background:red;float:left;} 4 .right{ width:200px;float:right;} 5 .div{width:180px;height:180px;background:blue;padding:15px;} 6 /* 7 计算一定要精确 不要让内容的宽高超出我们设置的宽高 8 在IE6下，内容会撑开设置好的宽高 9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <div class="left"></div> 15 <div class="right"> 16 <div class="div"></div> 17 </div> 18 </div> 19 </body>
2. IE6 でフローティング要素がある場合、コンテンツで幅をサポートする必要がある場合は、内部のすべてのブロック要素にフローティング要素を追加する必要はありません。
例:
1 <style> 2 .box{ width:400px;} 3 .left{background:red;float:left;} 4 .right{float:right; background:blue;} 5 h3{margin:0;height:30px; float:left;} 6 /* 7 在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="left"> 14 <h3>左侧</h3> 15 </div> 16 <div class="right"> 17 <h3>右侧</h3> 18 </div> 19 </div> 20 </body>
3. IE6 では、要素の高さが 19px 未満の場合、19px として扱われます
解決策: overflow:hidden;
を追加します
4. IE6 border:1px dotted #000; では、dotted はサポートされていないため、点線として表示されます。
解決策: 背景タイルをカットします
5. すべてのブラウザで、子要素の margin-top と margin-bottom の値が親に渡されます。 a: 両方の親に float を追加します (または子に float を追加することでもマージントップ問題を解決できますが、左右のマージン値が
doubleで表示されます。これは双方向データのバグ問題であり、これについては後で説明します)以下）; b: 親にposition:relative;（またはposition:absolute;ただしドキュメントフローから外れます）を追加します
c:display:inline-block;を追加します。 IE および 7 では、ブロック要素は表示をサポートしません :inline-block; d: 添付ファイルに border 属性を追加します (例: border:1px Solid red)。これは通常のブラウザでは実行可能ですが、IE6 ではズームを追加する必要があります。 :1;
eg: 1 <style> 2 body{margin:0;} 3 .box{background:blue;border:1px solid #000; zoom:1;} 4 .div{width:200px;height:200px;background:red;margin:100px;} 5 /* 6 在IE6下解决margin传递要触发haslayout 7 8 在IE6下父级有边框的时候，子元素的margin值消失 9 10 解决办法:触发父级的haslayout 11 */ 12 </style> 13 </head> 14 <body> 15 <div class="box"> 16 <div class="div"></div> 17 </div> 18 </body> 6. IE6 では、ブロック要素には浮動および水平マージン値があり、水平マージン値は 2 倍になります。
解決策:display:inline;を追加
1 <style> 2 .box{ float:left;border:10px solid #000;} 3 .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;} 4 /* 5 margin-right 一行右侧第一个元素有双边距 6 7 margin-left 一行左侧第一个元素有双边距 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div>1</div> 14 <div>2</div> 15 <div>3</div> 16 <div>4</div> 17 </div> 18 </body> 7. IE6,7ではli自体はFloatではなく、liの中身がFloatになってliの下に隙間ができてしまいます
解決方法:
1. li に float を追加します 2.vertical-align:top; を追加します
注: IE6 での最小高さの問題が li のギャップの問題と共存する場合、li に float を追加することで解決できます。
1 <style> 2 ul{margin:0;padding:0;width:302px;} 3 li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;} 4 a{width:100px;float:left;height:30px;background:Red;} 5 span{width:100px;float:right;height:30px;background:blue;} 6 /* 7 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙 8 解决办法: 9 1.给li加浮动 10 2.给li加vertical-align 11 */ 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <a href="#"></a> 18 <span></span> 19 </li> 20 <li> 21 <a href="#"></a> 22 <span></span> 23 </li> 24 <li> 25 <a href="#"></a> 26 <span></span> 27 </li> 28 </ul> 29 </body>
子要素の行の幅の合計と親要素の幅の差が 3px を超える場合、または完全な行ステータスがない場合、下マージンは子要素の最後の行は IE6 では失敗します
解決策:うーん、まだ見つかりません
例: 1 <style> 2 .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;} 3 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;} 4 /* 5 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效 6 */ 7 </style> 8 </head> 9 <body> 10 <div class="box"> 11 <div>1</div> 12 <div>2</div> 13 <div>3</div> 14 <div>4</div> 15 <div>1</div> 16 <div>2</div> 17 <div>3</div> 18 <div>4</div> 19 <div>1</div> 20 <div>2</div> 21 <div>3</div> 22 <!-- <div>4</div> --> 23 </div>
解決策:
Useコメントまたはインライン要素を配置するには div 要素は div でラップされます。例:
1 <style> 2 .box{ width:400px;} 3 .left{float:left;} 4 .right{width:400px;float:right;} 5 </style> 6 </head> 7 <body> 8 <div class="box"> 9 <div class="left"></div> 10 <!-- IE6下的文字溢出BUG --><span></span> 11 <div class="right">↓哈哈哈哈哈哈哈哈哈哈</div> 12 </div> 13 <!-- 14 在IE6下的文字溢出BUG 15 16 子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素 17 18 解决办法:用div把注释或者内嵌元素用div包起来 19 --> 20 </body> 10. 浮動要素と絶対配置要素が並列関係にある場合、IE6 では絶対配置要素が表示されなくなります。 解決策: 位置決めされた要素を div でラップします。
例: 1 <style> 2 .box{ width:200px;height:200px;border:1px solid #000; position:relative;} 3 span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;} 4 ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;} 5 /* 6 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失 7 解决办法: 8 给定位元素外面包个div 9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <ul></ul> 15 <span></span> 16 </div>
11.
解決策:
相対位置指定position:relative;を親にも追加します。例:
1 <style> 2 .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /* position:relative; */ } 3 .div{ width:150px;height:300px;background:yellow; position:relative;} 4 /* 5 在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素 6 7 解决办法: 给父级也加相对定位position:relative; 8 */ 9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="div"></div> 14 </div> 15 </body> 12. IE6 では、絶対配置要素の親の幅と高さが奇数の場合、要素の正しい値と下の値は 1px ずれます。 解決策: 頑張ってください 偶数を使用する他の方法は見つかりませんでした。
13. IE6 では、position: 固定は効果がありません。
解決策:
14.
IE6、7では入力型フォームコントロールの上下に1pxの隙間があります。解決策: 入力に float を追加するか、絶対位置を追加します。
15.
IE6 および 7 では、入力タイプのフォーム コントロールに border:none; を追加すると、境界線がまだ存在していることがわかります解決策:
入力の背景をリセットします。 input{background:#fff;}; または、 border:0; または border:0 none; を使用します。
16.
IE6 および 7 で入力タイプのフォーム コントロールにテキストを入力すると、その背景画像も一緒に移動します。解決策:
背景を親に追加します。
17. CSS で float をクリアするより簡潔な方法:
方法 1:
/* float をクリーンアップ */
.clearfix:after {
visibility:hidden;
display:block;
font- size:0 ;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
方法 2:
親要素にコードを追加: オーバーフロー:auto;zoom :1;
18. CSS 強制改行と強制改行なし:
/* 改行禁止 */ /* 強制改行 */ .break{word- Break:break-all;}
19. ハイパーリンク スタイル設定:
a:link {color: #FF0000} /* 未訪問のリンク * /a:visited {color: #00FF00} /* 訪問済みのリンク*/
a:hover {color: #FF00FF} /* リンク上にマウスを移動します */
a:active {color: #0000FF} /* 選択されたリンク */
20。CSS/JS オンライン圧縮: (YUI Compressor ツールを使用)
http://ganquan.info/yui/?hl= zh-CN
21。コンテンツを表示できない場合は、省略記号を追加します: 🎛white-space:nowrap;
text-overflow:ellipsis; /* Internet Explorer の場合 */
width:190px;ブロック;
text-overflow:ellipsis｝
text-overflow:ellipsis (3 つのドットを表す省略記号)
22
ブラウザの互換性
margin-bottom:40px; /*ff のプロパティ*/
マージン-ボトム:140px9;