div+css布局下兼容IE6IE7FF常見…_html/css_WEB-ITnose
Jun 24, 2016 pm 12:27 PM
所有瀏覽器 通用 (市面上主要用到的IE6 IE7 FF) p對(duì)象中的內(nèi)容
height: 100px;
IE6 專用
_height: 100px;
IE6 專用
*height: 100px;
IE7 專用
*+height: 100px;
IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下兩種方法幾乎能解決現(xiàn)今所有兼容.
1, !important (不是很推薦,用下面的一種感覺最安全)
隨著IE7對(duì)!important的支持, !important 方法現(xiàn)在只針對(duì)IE6的兼容.(注意寫法.記得該聲明位置需要提前.)
代碼:
2, IE6/IE77對(duì)FireFox
*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽.
代碼:
注意:
*+html 對(duì)IE7的兼容 必須保證HTML頂部有如下聲明:
代碼:
"http://www.w3.org/TR/html4/loose.dtd">
二、萬能 float 閉合(非常重要!) 可以用這個(gè)解決多個(gè)div對(duì)齊時(shí)的間距不對(duì),
關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
代碼:
三、其他兼容技巧(相當(dāng)有用)
1, FF下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會(huì).(可用!important解決)
2, 居中問題.
1).垂直居中.將 line-height 設(shè)置為 當(dāng)前 div 相同的高度, 再通過 vetical-align: middle.( 注意內(nèi)容不要換行.)
2).水平居中. margin: 0 auto;(當(dāng)然不是萬能)
3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標(biāo)簽)
4, FF 和 IE 對(duì) BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題.
5, ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng).
7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 IE.貼上代碼:
8、IE6 的雙倍邊距 BUG
? ?
? ? 浮動(dòng)后本來外邊距10px, 但I(xiàn)E 解釋為20px, 解決辦法是加上 display:inline
9、為什么FF 下文本無法撐開容器的高度?
標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6 里那樣被撐開的, 那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢?辦法就是去掉height 設(shè)? ? ? ? 置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height 的IE6 可以這樣定義:
? ? div { height:auto!important; height:200px; min-height:200px; }
兼容代碼:兼容最推薦的模式。
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
*html .submitbutton {
margin-top: 21px;
}
*+html .submitbutton {
margin-top: 21px;
}
什么是瀏覽器兼容:當(dāng)我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個(gè)網(wǎng)站,或者頁面的時(shí)候,會(huì)出現(xiàn)一些不兼容的問題,有的顯示出來正常,有的顯示出來不正常,我們?cè)诰帉慍SS的時(shí)候會(huì)很惱火,剛修復(fù)了這個(gè)瀏覽器的問題,結(jié)果另外一個(gè)瀏覽器卻出了新問題。而兼容就是一種辦法,能讓你在一個(gè)CSS里面獨(dú)立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵!
程序代碼
第一個(gè)兼容,IE FF 所有瀏覽器 公用(其實(shí)也不算是兼容)
height:100px;
第二個(gè)兼容 IE6專用
_height:100px;
第三個(gè)兼容 IE6 IE7公用
*height:100px;
height:100px;
*height:120px;
_height:150px;
在FF下,第2、3個(gè)屬性FF不認(rèn)識(shí),所以它讀的是 height:100px;
在IE7下,第三個(gè)屬性IE7不認(rèn)識(shí),所以它讀第1、2個(gè)屬性,又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性,所以IE7最終讀出的是第2個(gè)屬性 *height:120px;
在IE6下,三個(gè)屬性IE6都認(rèn)識(shí),所以三個(gè)屬性都可以讀取,又因?yàn)榈谌齻€(gè)屬性覆蓋掉前2個(gè)屬性,所以IE6最終讀取的是第三個(gè)屬性。
1 針對(duì)firefox ie6 ie7的css樣式
現(xiàn)在大部分都是用!important來兼容,對(duì)于ie6和firefox測(cè)試可以正常顯示,但是ie7對(duì)!important可以正確解釋,會(huì)導(dǎo)致頁面沒按要求顯示!找到一個(gè)針對(duì)IE7不錯(cuò)的兼容方式就是使用“*+html”,現(xiàn)在用IE7瀏覽一下,應(yīng)該沒有問題了現(xiàn)在寫一個(gè)CSS可以這樣:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2 css布局中的居中問題
主要的樣式定義如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明:
首先在父級(jí)元素定義TEXT-ALIGN: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中;對(duì)于IE這樣設(shè)定就已經(jīng)可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要說明的是,如果你想用這個(gè)方法使整個(gè)頁面要居中,建議不要套在一個(gè)DIV里,你可以依次拆出多個(gè)div,只要在每個(gè)拆出的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 浮動(dòng)ie產(chǎn)生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px的距離 display:inline; //使浮動(dòng)忽略}
這里細(xì)說一下block,inline兩個(gè)元素,Block元素的特點(diǎn)是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);
#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的的效果 diplay:table;
5 IE與寬度和高度的問題
IE 不認(rèn)得min-這個(gè)定義,但實(shí)際上它把正常的width和height當(dāng)作有min的情況來使。這樣問題就大了,如果只用寬度和高度,正常的瀏覽器里這兩個(gè)值就不會(huì)變,如果只用min-width和min-height的話,IE下面根本等于沒有設(shè)置寬度和高度。比如要設(shè)置背景圖片,這個(gè)寬度是比較重要的。要解決這個(gè)問題,可以這樣:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 頁面的最小寬度
min- width是個(gè)非常方便的CSS命令,它可以指定元素最小也不能小于某個(gè)寬度,這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè),而它實(shí)際上把 width當(dāng)做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個(gè)
然后CSS這樣設(shè)計(jì):
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth }
第一個(gè)min-width是正常的;但第2行的width使用了Javascript,這只有IE才認(rèn)得,這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過Javascript的判斷來實(shí)現(xiàn)最小寬度。
7 清除浮動(dòng)
.兼容box{
display:table;
//將對(duì)象作為塊元素級(jí)的表格顯示
}
或者
.兼容box{
clear:both;
}
或者加入:after(偽對(duì)象),設(shè)置在對(duì)象后發(fā)生的內(nèi)容,通常和content配合使用,IE不支持此偽對(duì)象,非Ie 瀏覽器支持,所以并不影響到IE/WIN瀏覽器。這種的最麻煩的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV浮動(dòng)IE文本產(chǎn)生3象素的bug
左邊對(duì)象浮動(dòng),右邊采用外補(bǔ)丁的左邊距來定位,右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//這句是關(guān)鍵
}
HTML代碼
9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
10 IE捉迷藏的問題
當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接,DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。
有些內(nèi)容顯示不出來,當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面。
解決辦法:對(duì)#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡(jiǎn)單。
11 高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié),特別是當(dāng)內(nèi)層對(duì)象使用
margin 或paddign 時(shí)。例:
CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解決方法:在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼:.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。
屏蔽IE瀏覽器(也就是IE下不顯示)
*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;}
這里select是選擇符,根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。
僅IE7識(shí)別
*+html {…}
當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)兼容。
IE6及IE6以下識(shí)別
* html {…}
這個(gè)地方要特別注意很多地主都寫了是IE6的兼容其實(shí)IE5.x同樣可以識(shí)別這個(gè)兼容。其它瀏覽器不識(shí)別。
html >body select {……}
這句與上一句的作用相同。
僅IE6不識(shí)別
select { display :none;}
這里主要是通過CSS注釋分開一個(gè)屬性與值,流釋在冒號(hào)前。
僅IE6與IE5不識(shí)別
select { display :none;}
這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。
僅IE5不識(shí)別
select { display:none;}
這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識(shí)別
盒模型解決方法
selct {width:IE5.x寬度; voice-family :""}""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點(diǎn)要明確。
清除浮動(dòng)
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,當(dāng)子級(jí)都為浮動(dòng)時(shí),那么父級(jí)的高度就無法完全的包住整個(gè)子級(jí),那么這時(shí)用這個(gè)清除浮動(dòng)的兼容來對(duì)父級(jí)做一次定義,那么就可以解決這個(gè)問題 。
截字省略號(hào)
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字,并以省略號(hào)結(jié)尾,很好的一個(gè)技術(shù)。只是目前Firefox并不支持。
只有Opera識(shí)別
@media all and (min-width: 0px){ select {……} }
針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。
以上都是寫CSS中的一些兼容,建議遵循正確的標(biāo)簽嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系),這樣可以減少你使用兼容的頻率,不要進(jìn)入理解誤區(qū),并不是一個(gè)頁面就需要很多的兼容來保持多瀏覽器兼容),很多情況下也許一個(gè)兼容都不用也可以讓瀏覽器工作得非常好,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內(nèi)容也分離出來,不妨試一下下面的幾種過濾器。這些過濾器有的是寫在 CSS中通過過濾器導(dǎo)入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。
IE5.x的過濾器,只有IE5.x可見
@media tty {
i{content:"";}} @import ’ie5win.css’;
IE5/MAC的過濾器,一般用不著
IE的if條件兼容 自己可以靈活使用參看這篇IE條件注釋
Only IE
所有的IE可識(shí)別
只有IE5.0可以識(shí)別
Only IE 5.0+
IE5.0包換IE5.5都可以識(shí)別
僅IE6可識(shí)別
Only IE 7/-
IE6以及IE6以下的IE5.x都可識(shí)別
Only IE 7/-
僅IE7可識(shí)別
Css 當(dāng)中有許多的東西不不按照某些規(guī)律來的話,會(huì)讓你很心煩,雖然你可以通過很多的兼容,很多的!important 來控制它,但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心,看看許多優(yōu)秀的網(wǎng)站,他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運(yùn)行起來完美無缺是不是很羨慕?而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。其實(shí)你要知道IE 和 Firefox 并不不是那么的不和諧,我們找到一定的方法,是完全可以讓他們和諧共處的。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法,你就掌握了一切,我們并不是兼容的奴隸。
div ul li 的嵌套順序
具體嵌套寫法
遵循上面得嵌套方式, 然后在CSS 里面告訴 ul {Margin:0px adding:0px;list-style:none;},其中l(wèi)ist-style:none是不讓

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Um HTML -Schaltfl?chenelemente zu verwenden, um anklickbare Schaltfl?chen zu erreichen, müssen Sie zun?chst die grundlegende Verwendung und gemeinsame Vorsichtsma?nahmen beherrschen. 1. Erstellen Sie Schaltfl?chen mit Tags und definieren Sie Verhaltensweisen durch Typattribute (z. B. Schaltfl?che, Senden, Zurücksetzen), die standardm??ig übermittelt werden. 2. Fügen Sie interaktive Funktionen über JavaScript hinzu, die über ID geschrieben werden k?nnen, um Ereignish?rer zu verbinden, um die Wartung zu verbessern. 3.. Verwenden Sie CSS, um Stile anzupassen, einschlie?lich Hintergrundfarbe, Grenze, abgerundete Ecken und Schwebe-/aktive Statusffekte, um die Benutzererfahrung zu verbessern. 4. Achten Sie auf h?ufige Probleme: Stellen Sie sicher, dass das behinderte Attribut nicht aktiviert ist. Meistere das

Metadaten in HTMLhead sind entscheidend für das Verhalten von SEO-, Social Sharing und Browser. 1. Setzen Sie den Seitentitel und die Beschreibung, verwenden Sie es und halten Sie es pr?zise und einzigartig. 2. Fügen Sie OpenGraph- und Twitter -Karteninformationen hinzu, um die Auswirkungen auf die soziale Freigabe zu optimieren, auf die Bildgr??e zu achten und Debugging -Tools zum Testen zu verwenden. 3. Definieren Sie die Einstellungen für den Zeichensatz und die Ansichtsfenster, um sicherzustellen, dass die Unterstützung mehrsprachiger Unterstützung an das mobile Terminal angepasst wird. 4. Optionale Tags wie das Urheberrecht des Autors, die Kontrolle der Roboter und die kanonische Verhindern doppelter Inhalte sollten auch vernünftig konfiguriert werden.

Tolearnhtmlin2025, ChooseatutororyThatbalancesHands-On-Practionwithmoderit und IntegrateCsSandjavaScriptbasics.1.PrioritizeHands-OnLearningWithStep-by-Stepprojects-?hnlich

Wie mache ich HTML -Mail -Vorlagen mit guter Kompatibilit?t? Zun?chst müssen Sie eine Struktur mit Tabellen erstellen, um die Verwendung von Div -Flex- oder Netzlayout zu vermeiden. Zweitens müssen alle Stile eingefügt werden und k?nnen sich nicht auf externe CSS verlassen. Dann sollte das Bild mit ALT -Beschreibung hinzugefügt werden und eine ?ffentliche URL verwenden, und die Schaltfl?chen sollten mit einer Tabelle oder TD mit Hintergrundfarbe simuliert werden. Schlie?lich müssen Sie die Details zu mehreren Clients testen und anpassen.

Die Verwendung von HTML -Summen erm?glicht die intuitive und semantische Klarheit, Bildern oder Medien einen Bildunterschriftentext hinzuzufügen. 1.. Wird verwendet, um unabh?ngige Medieninhalte wie Bilder, Videos oder Codebl?cke einzuwickeln; 2. Es wird als erkl?render Text platziert und kann über oder unter den Medien befinden. 3. Sie verbessern nicht nur die Klarheit der Seitenstruktur, sondern verbessern auch die Zug?nglichkeit und den SEO -Effekt. 4. Wenn Sie es verwenden, sollten Sie darauf achten, Missbrauch zu vermeiden, und sich auf Inhalte bewerben, die eher von Beschreibung als von gew?hnlichen dekorativen Bildern betont und begleitet werden müssen. 5. Das Alt -Attribut, das nicht ignoriert werden kann, das sich von Figcaption unterscheidet; 6. Die Figur ist flexibel und kann nach Bedarf oben oder unten in der Figur platziert werden. Wenn Sie diese beiden Tags korrekt verwenden, k?nnen Sie semantische und leicht verst?ndliche Webinhalte erstellen.

Klasse, ID, Stil, Daten und Titel sind die am h?ufigsten verwendeten globalen Attribute in HTML. Die Klasse wird verwendet, um einen oder mehrere Klassennamen anzugeben, um die Stileinstellung und JavaScript -Vorg?nge zu erleichtern. ID bietet eindeutige Kennungen für Elemente, die für Anker -Sprünge und JavaScript -Kontrolle geeignet sind. Durch den Stil k?nnen Inline-Stile hinzugefügt werden, geeignet für ein vorübergehendes Debuggen, aber nicht für die Verwendung von gro?em Ma?stab empfohlen. Data-Properties werden verwendet, um benutzerdefinierte Daten zu speichern, was für die Interaktion mit Front-End- und Back-End-Interaktion geeignet ist. Der Titel wird verwendet, um Mausover -Eingaben hinzuzufügen, aber sein Stil und sein Verhalten werden durch den Browser begrenzt. Eine angemessene Auswahl dieser Attribute kann die Entwicklungseffizienz und die Benutzererfahrung verbessern.

Wenn es keinen Backend-Server gibt, kann die Einreichung von HTML-Formular weiterhin über Front-End-Technologie oder Drittanbieterdienste verarbeitet werden. Zu den spezifischen Methoden geh?ren: 1. JavaScript verwenden, um die Einreichungen von Formulareingaben abzufangen, um die Eingabeüberprüfung und das Benutzerfeedback zu erhalten. Die Daten werden jedoch nicht bestehen. 2. Verwenden Sie serverlose Formulardienste von Drittanbietern wie F?rse, um Daten zu sammeln und E-Mail-Benachrichtigungs- und Umleitungsfunktionen bereitzustellen. 3.. Verwenden Sie LocalStorage, um tempor?re Clientdaten zu speichern, die zum Speichern von Benutzerpr?ferenzen oder zum Verwalten von Anwendungsstatus einseitig geeignet sind, jedoch nicht für die langfristige Speicherung vertraulicher Informationen geeignet sind.

Native Lazy Loading ist eine integrierte Browserfunktion, die das faule Laden von Bildern durch Hinzufügen von Loading = "Lazy" zum Tag hinzufügen kann. 1. Es erfordert keine Bibliotheken von JavaScript oder Drittanbietern und wird direkt in HTML verwendet. 2. Es ist für Bilder geeignet, die nicht auf dem ersten Bildschirm unterhalb der Seite, die Scrolling-Add-Ons und gro?e Bildressourcen angezeigt werden. 3. Es ist nicht für Bilder mit dem ersten Bildschirm oder Display geeignet: keine; 4. Bei der Verwendung sollte ein geeigneter Platzhalter festgelegt werden, um Layout -Jitter zu vermeiden. 5. Es sollte das Laden von Responsive Bild in Kombination mit SRCSet- und Gr??enattributen optimieren. 6. Kompatibilit?tsprobleme müssen berücksichtigt werden. Einige alte Browser unterstützen es nicht. Sie k?nnen durch Merkmalserkennung verwendet und mit JavaScript -L?sungen kombiniert werden.
