


DIV CSS 互換性は、IE6/IE7/FF ブラウザーの完全な互換性を解決するための一般的な方法です (転送)_html/css_WEB-ITnose。
Web サイトをデザインするときは、さまざまなブラウザーとの CSS スタイルの互換性に注意を払う必要があります。特に、完全に DIV CSS を使用してデザインされた Web サイトの場合は、IE6 IE7 FF と CSS スタイルの互換性にさらに注意を払う必要があります。ネットワークが混乱している可能性があるので、外出したくないのです。
すべてのブラウザに共通
高さ: 100px;
IE6 のみ
_height: 100px;
IE6 のみ
*+height: 100px; FF
身長: 100px ! important;
1. CSS HACK
1, ! important
IE7 での ! important のサポートにより、! important メソッドは IE6 の HACK 専用になりました (記述に注意してください。宣言位置に注意してください)。事前に必要です)
以下は引用された内容です:
注:
*+html IE7 の HACK は次のことを確認する必要がありますHTML の先頭に次のステートメントがあることを確認します。
2. ユニバーサルフロートクロージャ
クリアフロートについて 原理は[構造マークアップなしでフロートをクリアする方法]を参照してください
次のコードをグローバルCSSに追加し、class="clearfix"を追加しますdiv を閉じる必要があります。これは試行およびテストされています。
以下は引用された内容です: < ;style>
/* Clear Fix */.clearfix:after{
content:”.”;
visibility:hidden; } .clearfix { display:inline-block; } /* IE Mac から非表示にする */ .clearfix {display: block;} /* IE Mac からの非表示終了 */ /* Clearfix の終了 */ 3. その他の互換性に関するヒント 1. FF の下の div にパディングを設定すると幅と高さが増加しますが、IE では増加しません (!重要な問題を解決できます) たとえば、width:115px ! important;width: 120px;padding:5px; !重要; が前にある必要があることに注意してください。 幅: 40px; 那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。 2 css布局中的居中问题 body {TEXT-ALIGN: center;} 3 盒模型不同解释 #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} 4 浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table; IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度, 6 页面的最小宽度 min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个, 放到 标签下,然后为div指定一个类: 然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );} 第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 7 清除浮动 .hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;} 8 DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键} 9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 10 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。 11 高度不适应 p对象中的内容 CSS: #box {background-color:#eee; } #box p {margin-top: 20px; text-align:center; }空の div オブジェクトの CSS コードを上下に 2 つ追加します: .1{height:0px;overflow:hidden;} または、div に border 属性を追加します。 IE ブラウザをブロックします (つまり、IE では表示されません) *:lang(zh) select {font:12px !重要;} /*FF, OP 表示*/ select:empty {font:12px ! important;} /*Safariで表示*/ ここがセレクターなので状況に応じて変更してください。 2 番目の文は、MAC 上の Safari ブラウザーに固有のものです。 IE7 でのみ認識されます *+html {…} この互換性は、IE7 専用のスタイルを作成する必要がある場合に使用できます。 IE6 以下の識別 * html {…} 多くの地主が IE6 と互換性があると書いていますが、実際には IE5.x もこの互換性を認識します。他のブラウザでは認識されません。 html/**/ >body select {……} この文は前の文と同じ効果があります。 IE6のみ認識しません select{display /*IE6は認識しません*/:none;} ここでは主に CSS コメントを通じて属性と値を分離しており、コロンの前に解放されます。 IE6 と IE5 のみ select/**/ { 表示 /*IE6、IE5は認識しません*/:none;} 上の文との違いは、セレクターと中括弧の間に追加の CSS コメントがあることです。 IE5のみ認識しません select/*IE5は認識しません*/ { display:none;} この文は、前の文から属性領域のコメントを削除したものです。 IE5 のみが Box モデル ソリューション selct {width:IE5 を認識しません。!処理することが重要です。これは明確にする必要があります。 float をクリアします select:after {content:"."; display:block; height:0; clear:both; Visibility:hidden;} 子がすべてフローティングになっている場合、親の高さは子全体を完全にラップすることは不可能であり、この明確な浮動互換性を使用して親を一度定義すると、この問題は解決できます。 切り捨て省略 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } これは、長さを超えた後に、余分なテキストを自動的に切り取ります。省略記号を使用するのは良いテクニックです。 Firefox が現在サポートしていないだけです。 Opera でのみ認識 @media all and (min-width: 0px){ select {……} } Opera ブラウザ用に別途設定を行ってください。 上記は、CSS を記述する際の互換性の一部です。正しいタグのネスト (div ul li のネストされた構造関係) に従うことをお勧めします。これにより、互換性を使用する頻度が減り、誤解を避けることができます。1 つのページを維持するために多くの互換性は必要ありません。多くの場合、ブラウザは互換性がなくても問題なく動作する可能性があります。これらは、互換性コンテンツを分離するために使用されます。以下のフィルタを試してみるとよいでしょう。これらのフィルターの一部は CSS で作成され、フィルターを通じて特別なスタイルをインポートします。また、一部は HTML で作成され、条件を通じて必要なパッチ スタイルをリンクまたはインポートします。 IE5.x 用のフィルター。IE5.x のみが表示されます @media tty { i{content:"";/*" "*/}} @import 'ie5win.css' /*";} } /* */ IE5/MAC フィルターは通常は必要ありません /**//*/ @import "ie5mac.css"; /**/ 以下は、IE の条件付きコメントです。意見 条件付きコメントを使用して対応する互換性を呼び出すことは、互換性が必要な部分を別のファイルに置くことで、互換性のあるスタイルを呼び出すことができるだけではありません。非常に使いやすく、CSS自体を作る上でも、互換性を含めたコードをすべてCSSに記述しておくと、互換性を使う必要があるかどうかをより厳密に観察できることが多いです。非常にカジュアルなので、CSSとの互換性を持たせるべきか、調整を先にするべきかを無意識に考えてしまいます。互換性を最小限に抑えて、多くのブラウザを非常に従順にするとき、この IE 条件メモを参照してください。使用可能 IEのみ すべてのIEが認識可能 IE5.0のみが認識可能 IE5.0+のみが認識可能 IE5.0はIE5.5を置き換え可能 IE6のみが認識可能 IE7/-のみが認識可能 IE6で認識可能IE6以下のIE5.x IE 7/-のみ IE7のみ認識可能 CSS に特定のルールに従っていないものがたくさんあると、非常にイライラするでしょう。多くの互換性と ! important を使用して制御することはできますが、長期的には非常に気が進まないことになるでしょう。 CSS によって IE6、Ie7、Firefox、さらには Safari や Opera さえも完璧に動作する優れた Web サイトを羨ましく思いませんか?そして、一見複雑なテンプレートは互換性をほとんど使用していません。実際、IE と Firefox はそれほど不調和なものではなく、これらを調和して共存させる特定の方法を見つけることができることを知っておく必要があります。互換性のある方法を見つけたら、すべてをマスターしたことになるとは考えないでください。私たちは互換性の奴隷ではありません。 div ul li のネスト順序 今日は 1 つのルールだけを説明します。
|

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex
