搜尋
首頁web前端html教學DIV+CSS浏览器兼容性的详解

一、!important (功能有限)  

随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)  
例如: 

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

二、CSS HACK的方法(新手可以看看,高手就当路过吧) 

首先需要知道的是: 

所有浏览器 通用 height: 100px;  
IE6 专用 _height: 100px;  
IE7 专用 *+height: 100px;  
IE6、IE7 共用 *height: 100px;  
IE7、FF 共用 height: 100px !important; 

例如: 

#example { height:100px; } /* FF */ 
* html #example { height:200px; } /* IE6 */ 
*+html #example { height:300px; } /* IE7 */

下面的这种方法比较简单 

举几个例子: 

1、IE6 - IE7+FF 

#example {  
height:100px; /* FF+IE7 */  
_height:200px; /* IE6 */  
}

其实这个用上面说的第一种方法也可以  

#example {  
height:100px !important; /* FF+IE7 */  
height:200px; /* IE6 */  
}

2、IE6+IE7 - FF 

#example {  
height:100px; /* FF */  
*height:200px; /* IE6+IE7 */  
}

3、IE6+FF - IE7 

#example {  
height:100px; /* IE6+FF */  
*+height:200px; /* IE7 */  
}

4、IE6 IE7 FF 各不相同 

#example {  
height:100px; /* FF */  
_height:200px; /* IE6 */  
*+height:300px; /* IE7 */  
}

或:  

#example {  
height:100px; /* FF */  
*height:300px; /* IE7 */  
_height:200px; /* IE6 */  
}

需要注意的是,代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面 

解释一下4的代码: 

读代码的时候,第一行height:100px; 大家都通用,IE6 IE7 FF 都显示100px  
到了第二行*height:300px; FF不认识这个属性,IE6 IE7都认,所以FF还显示100px,而IE6 IE7把第一行得到的height属性给覆盖了,都显示300px  
到了第三行_height:200px;只有IE6认识,所以IE6就又覆盖了在第二行得到的height,最终显示200px  
这样,三个浏览器都有自己的height属性了,各玩各的去吧 

这样说要是你还不明白,要么你去撞墙,要么我去!不过还是你去比较好。 

哦,差点忘了说了:  
*+html 对IE7的兼容 必须保证HTML顶部有如下声明:  

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

三、使用IE专用的条件注释 

〈!--其他浏览器 --〉 

〈link rel="stylesheet" type="text/css" href="http://www.php1.cn/">

〈!--[if IE 7]〉 

〈!-- 适合于IE7 --〉 

〈link rel="stylesheet" type="text/css" href="http://www.php1.cn/">

〈![endif]--〉 

〈!--[if lte IE 6]〉 

〈!-- 适合于IE6及以下 --〉 

〈link rel="stylesheet" type="text/css" href="http://www.php1.cn/">

〈![endif]--〉 

貌似要编三套css,我还没用过,先粘过来再说 

IE的if条件Hack 

1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉  
2. 〈!--[if IE]〉 所有的IE可识别 〈![endif]--〉  
3. 〈!--[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]--〉  
4. 〈!--[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]--〉  
5. 〈!--[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]--〉  
6. 〈!--[if IE 6]〉 仅IE6可识别 〈![endif]--〉  
7. 〈!--[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]--〉  
8. 〈!--[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]--〉  
9. 〈!--[if IE 7]〉 仅IE7可识别 〈![endif]--〉  
10. 〈!--[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]--〉  
11. 〈!--[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]--〉注:gt = Great Then 大于  
〉 = 〉 大于号  
lt = Less Then 小于  
〈 = 〈 小于号  
gte = Great Then or Equal 大于或等于  
lte = Less Then or Equal 小于或等于 

四、css filter的办法(据作者称是从国外某经典网站翻译过来的说) 

新建一个css样式如下: 

#item { 
width: 200px; 
height: 200px; 
background: red; 
}

新建一个p,并使用前面定义的css的样式: 

〈p 〉some text here〈/p〉 

在body表现这里加入lang属性,中文为zh: 

〈body〉 

现在对p元素再定义一个样式: 

*:lang(en) #item{ 
background:green !important; 
}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式: 

#item:empty { 
background: green !important 
}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。 

五、FLOAT闭合(clearing float) 

  网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是p无法自适应高度的一个原因。如果父p没有设float而其子p却设了float的话,父p无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。解决办法:
1、给父DIV也设上float(不要骂我,我知道是废话) 

2、在所有子DIV后新加一个空DIV(不推荐,有些浏览器可以看见空DIV产生的空隙) 

比如: 

.parent{width:100px;}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;}  
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;} 
〈p〉  
〈p〉〈/p〉  
〈p〉〈/p〉  
〈p〉〈/p〉  
〈/p〉

3、万能 float 闭合 

将以下代码加入Global CSS 中,给需要闭合的p加上 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〉

:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦。 

4、overflow:auto(刚看到的,极力推荐) 

只要在父DIV的CSS中加上overflow:auto就搞定。 

举例: 

.parent{width:100px;overflow:auto}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;} 
〈p〉  
〈p〉
〈/p〉  
〈p〉
〈/p〉  
〈/p〉

作者原话:原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决IE的问题了,再加上“_height:1%”,这个问题就完全解决了。 

我试了一下,其实不加"_height:1%“在IE下也行,留着吧。 

六、需要注意的一些兼容细节 

1, FF下给 p 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会. 

解决办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有标记" * "号。 
2, 页面居中问题. 

body {TEXT-ALIGN: center;} 在IE下足够了,但FF下失效。 

解决办法:加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; " 

3, 有的时候在IE6上看见一些奇怪的间隙,可我们高度明明设好了呀。 

解决办法:试试在有空隙的DIV上加上"font-size:0px;" 

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

5, 浮动IE6产生的双倍距离 

#box{ float:left;  
width:100px;  
margin:0 0 0 100px;  
}

这种情况之下IE6会产生200px的距离 

解决办法:加上display:inline,使浮动忽略 

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);  
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 

6 页面的最小宽度 

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里 这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。 

解决办法:为了让这一命令在IE上也能用,可以把一个〈p〉 放到 〈body〉 标签下,然后为p指定一个类:  
然后CSS这样设计:  

#container{  
min-width: 600px;  
width:e?xpression(document.body.clientWidth 〈 600? “600px”: “auto” );  
}

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 

7、UL和FORM标签的padding与margin 

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0; 

解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了. 

8 ,DIV浮动IE文本产生3象素的bug 

下面这段是我在网上粘过来的 

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. 

#box{  
float:left;  
width:800px;}  
#left{  
float:left;  
width:50%;}  
#right{  
width:50%;  
}  
*html #left{  
margin-right:-3px;  
//这句是关键  
}

HTML代码  

〈DIV id=box〉  
〈DIV id=left〉〈/DIV〉  
〈DIV id=right〉〈/DIV〉  
〈/DIV〉

针对上面这段代码,下面说一下我的理解: 

第一、只要right定义了width属性,在FF下绝对就会两行显示  
第二、两个width都定义为百分比的话,就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用,不加也在一行,除非你width定义的是数值才用得上。 

所以说上面这段代码其实用处不大,至少在FF下不行。其实只要只定义left的width就行了,right不定义width就不管在IE还是FF下都能成功,但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了,真磨叽! 

9,截字省略号 

.hh { -o-text-overflow:ellipsis;  
text-overflow:ellipsis;  
white-space:  
nowrapoverflow:hidden;  
}

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾。技术是好技术,很多人都喜欢乱用,但注意Firefox并不支持。 

 以上就是DIV+CSS浏览器兼容性的详解的内容,更多相关内容请关注PHP中文网(www.php.cn)!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能