莆田網站建設|莆田網絡公司|企業網站建設

網站建設CSS兼容問題

首頁 > 建站知識 > 網站建設CSS兼容問題

所有瀏覽器 通用 (市面上主要用到的IE6 IE7 FF)
height: 100px;

IE6 專用
_height: 100px;

IE6 專用
*height: 100px;

IE7 專用
*+height: 100px;

IE7、FF 共用
height: 100px !important;

一、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對,

關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global 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>

二、CSS 兼容
以下兩種方法幾乎能解決現今所有兼容.

1, !important (不是很推薦,用下面的一種感覺最安全)

隨著IE7對!important的支持, !important 方法現在只針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)

代碼:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77對FireFox <from 針對firefox ie6 ie7的css樣式>

*+html 與 *html 是IE特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽.

代碼:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
</style>

注意:
*+html 對IE7的兼容 必須保證HTML頂部有如下聲明:

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

三、其他兼容技巧(相當有用)

1, FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題.
1).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vetical-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.貼上代碼:
8、IE6 的雙倍邊距 BUG
<style type=”text/css”>
body {margin:0}
div { float:left; margin-left:10px; ; height:200px; border:1px solid red }
</style>
浮動后本來外邊距10px, 但IE 解釋為20px, 解決辦法是加上 display:inline
9、為什么FF 下文本無法撐開容器的高度?
標準瀏覽器中固定高度值的容器是不會象IE6 里那樣被撐開的, 那我又想固定高度,又想能被撐開需要怎樣設置呢?辦法就是去掉height 設 置min-height:200px; 這里為了照顧不認識min-height 的IE6 可以這樣定義:
div { height:auto!important; height:200px; min-height:200px; }
兼容代碼:兼容最推薦的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
什么是瀏覽器兼容:當我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個網站,或者頁面的時候,會出現一些不兼容的問題,有的顯示出來正常,有的顯示出來不正常,我們在編寫CSS的時候會很惱火,剛修復了這個瀏覽器的問題,結果另外一個瀏覽器卻出了新問題。而兼容就是一種辦法,能讓你在一個CSS里面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵!
程序代碼

第一個兼容,IE FF 所有瀏覽器 公用(其實也不算是兼容)
height:100px;
第二個兼容 IE6專用
_height:100px;
第三個兼容 IE6 IE7公用
*height:100px;
height:100px;
*height:120px;
_height:150px;

在FF下,第2、3個屬性FF不認識,所以它讀的是 height:100px;

在IE7下,第三個屬性IE7不認識,所以它讀第1、2個屬性,又因為第二個屬性覆蓋了第一個屬性,所以IE7最終讀出的是第2個屬性 *height:120px;

在IE6下,三個屬性IE6都認識,所以三個屬性都可以讀取,又因為第三個屬性覆蓋掉前2個屬性,所以IE6最終讀取的是第三個屬性。

浩博国际娱乐城平台 亿客隆 河内5分彩是骗局吗 河内五分彩开彩结果历史下载 OG视讯版本 江西快三平台骗局揭秘 七乐彩开奖结果109 黑金团队快乐8下载 北极星彩票官方网站-点击登陆 排列三跨度走势图200期带连线 极速快3群 广东11选5怎么杀一码 广东时时彩专家计划 河南泳坛夺金奖金 新疆风采喜乐彩开奖 11选5前三组选万能码 足彩胜负彩分析网站