


Compatible with IE6IE7FF under div css layout common..._html/css_WEB-ITnose
Jun 24, 2016 pm 12:27 PM
Common to all browsers (mainly IE6 IE7 FF on the market) p對(duì)象中的內(nèi)容
height: 100px;
Special for IE6
_height: 100px;
Exclusive for IE6
*height: 100px;
Exclusive for IE7
* height: 100px;
Common to IE7 and FF
height: 100px !important;
1. CSS Compatibility
The following two methods can solve almost all compatibility problems today.
1, !important (not very recommended, use the following one which feels safest)
With IE7 supports !important. The !important method is now only compatible with IE6. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)
Code:
2, IE6/IE77 for FireFox
*html and *html are IE-specific tags, which are not supported by firefox. And *html is a IE7-specific tag.
Code:
Note:
* To be compatible with IE7, html must have the following statement at the top of the HTML:
Code:
2. Universal float closure (very important!) You can use this to solve the problem of incorrect spacing when multiple divs are aligned. ,
For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]
Add the following code to Global CSS, and add class="clearfix" to the div that needs to be closed. It works every time. .
Code:
3. Other compatibility techniques (quite useful)
1. Setting padding on div under FF will cause width and height to change. increase, but IE will not. (can be solved with !important)
2. Centering problem.
1). Vertically centered. Set line-height to the same height as the current div, and then pass vetical-align: middle. (Be careful not to wrap the content.)
2). Center it horizontally. margin: 0 auto; (of course it’s not omnipotent)
3. If you need to add styles to the content in the a tag, you need to set display: block; (common (for navigation tags)
4. The difference in the understanding of BOX between FF and IE leads to a 2px difference. There are also problems such as double the margin of a div set to float under IE.
5. The ul tag has list- by default under FF. style and padding. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)
6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. Achieve a high degree of adaptability.
7. Regarding the hand cursor. cursor: pointer. And hand is only applicable to IE. Paste the code:
8. Double margin BUG of IE6
After floating, the original margin is 10px, but IE interprets it as 20px. The solution is to add display:inline
9. Why can’t the text under FF expand the height of the container?
Containers with a fixed height in standard browsers will not be stretched like in IE6. So if I want to have a fixed height but also want it to be stretched, how should I set it up? The way is to remove the height setting and set min-height:200px; Here, in order to take care of IE6 that does not know min-height, it can be defined like this:
div { height:auto!important; height:200px; min-height:200px; }
Compatible code: Compatible with the most recommended modes.
.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)訪問(wèn)同一個(gè)網(wǎng)站,或者頁(yè)面的時(shí)候,會(huì)出現(xiàn)一些不兼容的問(wèn)題,有的顯示出來(lái)正常,有的顯示出來(lái)不正常,我們?cè)诰帉?xiě)CSS的時(shí)候會(huì)很惱火,剛修復(fù)了這個(gè)瀏覽器的問(wèn)題,結(jié)果另外一個(gè)瀏覽器卻出了新問(wèn)題。而兼容就是一種辦法,能讓你在一個(gè)CSS里面獨(dú)立的寫(xiě)支持不同瀏覽器的樣式。這下就和諧了。呵呵!
程序代碼
第一個(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來(lái)兼容,對(duì)于ie6和firefox測(cè)試可以正常顯示,但是ie7對(duì)!important可以正確解釋,會(huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示!找到一個(gè)針對(duì)IE7不錯(cuò)的兼容方式就是使用“*+html”,現(xiàn)在用IE7瀏覽一下,應(yīng)該沒(méi)有問(wèn)題了現(xiàn)在寫(xiě)一個(gè)CSS可以這樣:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2 css布局中的居中問(wèn)題
主要的樣式定義如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說(shuō)明:
首先在父級(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; ”
需要說(shuō)明的是,如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中,建議不要套在一個(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ì)說(shuō)一下block,inline兩個(gè)元素,Block元素的特點(diǎn)是:總是在新行上開(kāi)始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素);
#box{ display:block; //可以為內(nèi)嵌元素模擬為塊元素 display:inline; //實(shí)現(xiàn)同一行排列的的效果 diplay:table;
5 IE與寬度和高度的問(wèn)題
IE 不認(rèn)得min-這個(gè)定義,但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了,如果只用寬度和高度,正常的瀏覽器里這兩個(gè)值就不會(huì)變,如果只用min-width和min-height的話,IE下面根本等于沒(méi)有設(shè)置寬度和高度。比如要設(shè)置背景圖片,這個(gè)寬度是比較重要的。要解決這個(gè)問(wèn)題,可以這樣:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 頁(yè)面的最小寬度
min- width是個(gè)非常方便的CSS命令,它可以指定元素最小也不能小于某個(gè)寬度,這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè),而它實(shí)際上把 width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用,可以把一個(gè)
然后CSS這樣設(shè)計(jì):
#container{
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一個(gè)min-width是正常的;但第2行的width使用了Javascript,這只有IE才認(rèn)得,這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(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ǔ)丁的左邊距來(lái)定位,右邊對(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代碼
<DIV id=box>
9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
這個(gè)對(duì)于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來(lái)說(shuō)縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
10 IE捉迷藏的問(wèn)題
當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接,DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問(wèn)題。
有些內(nèi)容顯示不出來(lái),當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面。
解決辦法:對(duì)#layout使用line-height屬性 或者給#layout使用固定高和寬。頁(yè)面結(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è)地方要特別注意很多地主都寫(xiě)了是IE6的兼容其實(shí)IE5.x同樣可以識(shí)別這個(gè)兼容。其它瀏覽器不識(shí)別。
html >body select {……}
這句與上一句的作用相同。
僅IE6不識(shí)別
select { display :none;}
這里主要是通過(guò)CSS注釋分開(kāi)一個(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:正確寬度;}
盒模型的清除方法不是通過(guò)!important來(lái)處理的。這點(diǎn)要明確。
清除浮動(dòng)
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,當(dāng)子級(jí)都為浮動(dòng)時(shí),那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí),那么這時(shí)用這個(gè)清除浮動(dòng)的兼容來(lái)對(duì)父級(jí)做一次定義,那么就可以解決這個(gè)問(wèn)題 。
截字省略號(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è)定。
以上都是寫(xiě)CSS中的一些兼容,建議遵循正確的標(biāo)簽嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系),這樣可以減少你使用兼容的頻率,不要進(jìn)入理解誤區(qū),并不是一個(gè)頁(yè)面就需要很多的兼容來(lái)保持多瀏覽器兼容),很多情況下也許一個(gè)兼容都不用也可以讓瀏覽器工作得非常好,這些都是用來(lái)解決局部的兼容性問(wèn)題,如果希望把兼容性的內(nèi)容也分離出來(lái),不妨試一下下面的幾種過(guò)濾器。這些過(guò)濾器有的是寫(xiě)在 CSS中通過(guò)過(guò)濾器導(dǎo)入特別的樣式,也有的是寫(xiě)在HTML中的通過(guò)條件來(lái)鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。
IE5.x的過(guò)濾器,只有IE5.x可見(jiàn)
@media tty {
i{content:"";}} @import ’ie5win.css’;
IE5/MAC的過(guò)濾器,一般用不著
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ī)律來(lái)的話,會(huì)讓你很心煩,雖然你可以通過(guò)很多的兼容,很多的!important 來(lái)控制它,但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心,看看許多優(yōu)秀的網(wǎng)站,他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運(yùn)行起來(lái)完美無(wú)缺是不是很羨慕?而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。其實(shí)你要知道IE 和 Firefox 并不不是那么的不和諧,我們找到一定的方法,是完全可以讓他們和諧共處的。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法,你就掌握了一切,我們并不是兼容的奴隸。
div ul li 的嵌套順序
具體嵌套寫(xiě)法
Follow the nesting method above, < /div> and then tell ul {Margin:0px adding:0px;list- in CSS style:none;}, where list-style:none prevents directory type tags such as dots or numbers from being displayed at the front of the

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.

The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.

To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.

To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.

To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.

It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.

HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout

To embed videos in HTML, use tags and specify the video source and attributes. 1. Use src attributes or elements to define the video path and format; 2. Add basic attributes such as controls, width, height; 3. To be compatible with different browsers, you can list MP4, WebM, Ogg and other formats; 4. Use controls, autoplay, muted, loop, preload and other attributes to control the playback behavior; 5. Use CSS to realize responsive layout to ensure that it is adapted to different screens. Correct combination of structure and attributes can ensure good display and functional support of the video.
