ホームページ > 記事 > ウェブフロントエンド > 互換性の問題 (pc css)_html/css_WEB-ITnose
互換性の問題 (pc css)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:47:361062ブラウズ
记录平时遇见的兼容性问题，有更好的解决办法希望各位提出，会持续更新
| 提出时间 | 问题描述 | 解决方案 |
| 2014/7/15 | table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字缺不会发生上述问题. | 方法1:可以使用怪异模式进行解析html,不建议(把!doctypehtml去掉 方法2:设置对应的元素的css;设置为块状元素或者浮动,具体帖子http://blog.csdn.net/fgdfgasd/article/details/7979763 |
| 2014/7/15 | ie不支持tr设置background | 使用td设置background(不推荐),使用css把tr设置background来的方便 |
| 为什么FF下文本无法撑开容器的高度 | 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的, 办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:{height:auto!important;height:200px;min-height:200px;} | |
| 怎么样才能让层显示在FLASH之上呢 | FLASH设置透明 解决的办法是给FLASH设置透明 | |
| 为什么web标准中IE无法设置滚动条颜色了 | 将body换成html,去掉doctype声明,进入怪异模式 | |
| 超链接访问过后hover样式就不出现的问题 | 被点击访问过的超链接样式不在具有hover和active了,改变CSS属性的排列顺序:L-V-H-Aa:link,a:visited,a:hover,a:active{} | |
| ie6中超链接加入边框显示不全 | 加入display:block,变为块状元素;zoom:1 | |
| ie6元素存在确不显示出来 | 父亲元素添加 overflow:hidden;zoom:1; ie6下浮动及绝对定位元素莫名消失的问题 在最后加入一个清浮动的div（CSS:.clear{clear:both;height:0;overflow:hidden;}HTML: | |
| 幅不定の水平方向のセンタリング (ページングによく使用されます) | 親要素の相対的な配置を使用します>コンテナ要素の絶対左:50%> ターゲット要素の相対左:-50% (または右:50%) は位置決めの脆弱性の実装です | |
| display: inline-block 要素を同じ水平方向に配置することはできませんline は、marginpadding を使用して調整することはできません | 隣接する要素vertical-align:top を設定して上部を揃えてから、-px を使用して画像を微調整します | |
| margin の場合、ホバーは効果がありません。 -1px 、z-indexの設定は機能しません | position:relativeを使用してホバー要素を表示します | |
| 幅をカスタマイズした全画面レイヤーを実現します | position:absoluteを使用して作成しますfloat, left: 0top:0 にして、margin-left: - 画像幅の半分を使用します | |
| thead がテーブルに境界線を設定した後、tbody は js を呼び出して境界線を設定しません。要素を非表示にしたり表示したりすると、Firefox tbody が境界線をレンダリングします | デフォルトは td に背景色の境界線を加えたもので、境界線を切り替えます | |
| line-height は植字に影響します、( Googleの影響もありますが、float:leftの後は左側を空白のままにしてください | 子要素は親要素のline-heightを継承するため、ブラウザの解析により問題が発生する可能性がありますので、line-heightを1またはnormalで使用するのが理想的です。 line-height:1.5font-size:10px; は line-height:1.5font-size:10px; であるため、解決策は、対応する要素の line-height を標準に設定するか、フォント サイズを小さいサイズに変更することです。 height:15px; 実際、line-height を変更すると、レイアウトが変更されます。推奨されません。 | 入力ボックスと画像が水平線上にありません、vertical-align:middle、ブラウザによって解釈が異なります(ie7-8) ずれが生じます同じことを説明するにはvertical-align:topブラウザを使用してください、ただし、画像の高さと入力ボックスの高さが同じである必要があることに注意してください |
| 2014/10/30 | サーバーのレンダリングCSSにズレが発生します | |
| 2014/11 /3 | ie6 は異なるエンコーディングの CSS を読み込むことができません | CSS エンコーディングを変更する |
| 2014/11/3 | ie6 には浮動 div の固定幅がありません。右側の浮動改行が表示されます | 対応する幅を追加します左側のフローティング div |
| 2014/11/4 | div と Section の違い | section の方が意味論的で、記事の分割やコンテンツの一部に適しています 違いはありますが、div を使用することをお勧めします |
| 2014/11/7 | 親要素が幅と高さを追加しないため、ie6の左下の絶対配置は無効です | zoom:1を使用してレイアウトをトリガーするか、親要素を追加します 高さまたは幅は解決できます |
| 2014/11/8 | 文字行の折り返し | IE では word-wrap:break-word を使用します。すべて正常です。 |
| 2014/12/25 | テキストの配置 | text-align:justify! important;//|
| 2014/12/25 | ie6-7トリガーinline-block | .classify_item{display:inline-block;width:592px;height:400px;}|
| display:inline-block; | *display:inline; | *zoom:1; 2015/1/4 ie6では、textとimgのとき、input、textareaのとき、select、object、およびその他のオブジェクトが同じコンテナ内にある場合、line-height 属性は無効です。 line-height 属性は全文に対してのみ有効です。 |
| 2015/1 /5 | clearfixはfloatをクリアして高さを自動的にレンダリングします 外部要素はoverflow:hidden; | を設定します|
| ie6-7overflow:hiddenは無効です | 親要素にオーバーフローがあっても:隠しセット。 | このバグを解決するのは非常に簡単です |
| 2015/1/6 | ie6-7li ネストされた ul にパディングがあります | 親要素に *zoom を追加します。 li of ul :1 は haslayout をトリガーします |
| 2015/1/12 | iecss3htc path.iecss{behavior:url(htc/pie.htc);} | パスはプロジェクトのルート ディレクトリ パスであり、 css../ htc/pie.htc を呼び出すときに使用する必要があります。 htc/pie.htc を直接指定できます。消失 |
| 2015/1/14 | ie6-7 親要素はoverflow:hiddenに設定されており、これは、子要素をposition:relative | に設定します|
| 2015/3/5 | IE7では、浮動要素の2行目の最初の要素はラップされます | |
| 2015/3/5 | ie7 の li の下のラベルの表示: block と li の間にギャップがあります | |
| 2015/3/17 | 123|123 この効果の margin-left: -1 が最外層オーバーフロー: 非表示は無効です | 効果を発揮するには、対応する層がブロック、ブロック、またはインラインブロックである必要があります |
| 2015/3/19 | dl浮動リストの2行目の最初の要素がie7で展開されました | IE7は高さを定義する必要があります |
| 2015/3/21 | 最後の浮動要素IE7 はラップします | 要素がwhite-space:nowrap;をラップしないように強制する必要があります |
| 再印刷するために元のアドレスを保存してください、ありがとうございます |
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。