ie678、FF、chrome_html/css_WEB-ITnoseのcss互換性-htmlチュートリアル-php.cn

ホットAIツール

ホットツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

ドリームウィーバー CS6

AtomエディタMac版ダウンロード

ゼンドスタジオ 13.0.1

SublimeText3 Mac版

DVWA

ホームページ

ウェブフロントエンド

htmlチュートリアル

ie678、FF、chrome_html/css_WEB-ITnoseのcss互換性

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

参考: http://www.liuzp.com/css/15.html

CSS の互換性は、一般にフロントエンド初心者にとって頭痛の種です。書かれた CSS がさまざまなブラウザーで異なる効果を示すことは避けられません。それらはすべて異なるため、さまざまな css ハックの記述方法が出てきています。実際、標準化されたプロジェクト開発では、互換性の問題が発生する場合は非標準的な記述が原因であることが多いため、可能であれば css ハックを使用することが推奨されています。しかし、ブラウザ自体、特に悪質な IE には確かにいくつかのバグがあります。

ヒント: CSS ハックとは何ですか?

IE6、IE7、IE8、Firefoxなどの異なるブラウザはCSS解析の理解が異なるため、生成されるページ効果は異なり、必要なページ効果が得られません。現時点では、同時に異なるブラウザと互換性があり、異なるブラウザで必要なページ効果が得られるように、ブラウザごとに異なる CSS を記述する必要があります。ブラウザごとに異なる CSS コードを記述するこのプロセスは CSS ハックと呼ばれ、CSS ハックの作成とも呼ばれます。

各ブラウザの CSS ハック互換性表:

IE6IE7IE8FireFoxChromeSafari!重要Y*+YY

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles

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

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

脱衣画像を無料で

AI衣類リムーバー

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

ビジュアル Web 開発ツール

最も人気のあるオープンソースエディター

強力な PHP 統合開発環境

神レベルのコード編集ソフト（SublimeText3）

#test{ color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7支持 */ _color:red; /* IE6支持 */ *color:red; /* IE6、IE7支持 */ +color:red; /* IE7支持 */ color:red\9; /* IE6、IE7、IE8支持 */ color:red\0; /* IE8支持 */}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

其他说明：

1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：

2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个
。
3、还有其他写法，比如：

*html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：http://www.w3.org/TR/html4/loose.dtd

5、顺序：Firefox、IE8、IE7、IE6依次排列。

一、CSS HACK

以下两种方法几乎能解决现今所有HACK

1. !important

随着IE7对!important的支持， !important 方法现在只针对IE6的HACK。（注意写法，记得该声明位置需要提前）

#test{ width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */}

2. IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签，firefox 不支持，而*+html 又为 IE7特有标签。

#wrapper {width:120px; } /* FireFox */*html #wrapper {width:80px;} /* ie6 fixed */*+html #wrapper {width:60px;} /* ie7 fixed, 注意顺序 *

注意：

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合

将以下代码加入CSS 中，给需要闭合的div加上 class="clearfix" 即可，屡试不爽。

<style>/* Clear Fix */.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}.clearfix{ display:inline-block;}/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>

三、其他兼容技巧（以下摘自互联网，不代表个人完全认同其解决方法）

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

2, 居中问题.

1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)

2).水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，

但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下：

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，

只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，

これら 2 つの値は通常のブラウザでは変更されません。min-width と min-height のみを使用すると、IE では幅と高さがまったく設定されないことになります。

たとえば、背景画像を設定したい場合は、この幅の方が重要です。この問題を解決するには、次のようにします。

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; }

6 ページの最小幅

min-width は、レイアウトを確実に保つために、要素の最小幅が特定の幅未満にならないように指定できる非常に便利な CSS コマンドです。常に正しい。しかし、IE はこれを認識せず、実際には幅を最小幅として使用します。このコマンドを IE で機能させるには、
タグの下に
を配置し、その div のクラスを指定します:
その後、CSS は次のように設計されます:

#container{ min-width : 600px; width:expression(document.body.clientWidth

最初の min-width は通常ですが、2 行目の幅は Javascript のみを使用します。これを認識できるのは IE だけなので、HTML ドキュメントの形式も低くなります。実際にはJavaScriptの判断により最小幅を実装しています。

7 Clear float

.hackbox{ display:table; // オブジェクトをブロック要素レベルのテーブルとして表示} または .hackbox{ clear:both;}

または add: after (擬似オブジェクト) , set オブジェクトの後に発生するコンテンツは通常、コンテンツと組み合わせて使用されます。IE はこの疑似オブジェクトをサポートしていないため、IE/WIN ブラウザーには影響しません。これの最も厄介なことは...#box:after{ content: "."; display: block; height: 0; clear: Both; Visibility: hidden;}

8 DIV フローティング IE テキストを生成します-ピクセルバグ

左側のオブジェクトはフローティングで、右側のオブジェクトのテキストは左側から 3 ピクセル離れた位置に配置されます。 left; width:800px;}# left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px;
HTML コード

9 属性セレクター (これは互換性があるとは考えられません。CSS を非表示にするバグです)

p[id]{}div[id]{}

これは IE6.0 およびそれ以下のバージョンでは非表示になっており、機能しますFF と OPera を使用して

属性の選択セレクターとサブセレクターの間にはまだ違いがありますが、サブセレクターの範囲は形式的には狭いですが、たとえば、p では属性セレクターの範囲が比較的広くなります。 [id]、id を持つすべての p タグは同じスタイルです。

10 IE かくれんぼの問題

div アプリケーションが複雑で、各列にいくつかのリンクがある場合、かくれんぼこの時、DIV のシーク問題が発生しやすくなります。

一部のコンテンツは表示できません。マウスでこの領域を選択すると、コンテンツが実際にページ上にあることがわかります。

解決策: #layout に line-height 属性を使用するか、#layout に固定の高さと幅を使用します。ページ構造はできるだけシンプルにしてください。

11 高さ非適応

高さ非適応とは、特に内部オブジェクトが

margin または Paddign を使用している場合、内側のオブジェクトの高さが変更された場合に、外側のレイヤーの高さを自動的に調整できないことを意味します。

例:

CSS: #box {background-color: # eee; }

#box p {margin-top: 20px; margin-bottom: 20px; }

解決策: P オブジェクトの CSS コード: 1{height の上下に 2 つの空の div オブジェクトを追加します。 :0px;overflow:hidden;}または、DIV に border 属性を追加します。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、