小花帶你一周入門html+css（六）CSS進階之兼容性與濾鏡丨【WEB前端大作戰】

今天我們來了解一下CSS進階之兼容性與濾鏡

常見兼容性問題及解決、濾鏡效果等

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面布局，就基本上掌握了大半啦~這時我們就已經能夠對網頁中各個元素進行精準的排版，做出符合我們意愿的網頁啦！

關于CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~

完全就是我們需要什么，只要憑著需求去尋找。~follow me~

常見兼容性問題及解決

由于小花現在的工作環境有些電腦還是有ie6、ie7的 之前的一些老系統還是要兼容ie8以下版本的。不過好在這兩年的系統對ie已經不做強制性要求。所以可以和ie8以下版本說拜拜┏(＾0＾)┛是挺開心的。

下面看一下這些年小花常見的十一種踩坑填坑筆記

首先看一下**兼容不同ie版本的字符

寫法

/*類內部hack：*/ .header {_width:100px;} /* IE6專用*/ .header {*+width:100px;} /* IE7專用*/ .header {*width:100px;} /* IE6、IE7共用*/ .header {width:100px\0;} /* IE8、IE9共用*/ .header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/ .header {width:330px\9\0;} /* IE9專用*/ /*選擇器Hack：*/ *html .header{} /*IE6*/ *+html .header{} /*IE7*/

設置ie文檔模式

例如

可以設置瀏覽器使用的文檔模式為7

默認的文檔模式為11（Edge），10，9依次降低。

1.important的兼容性

在ie6等低版本瀏覽器中，后面這個屬性值會頂替前面那個屬性值

2.盒子的尺寸問題（padding和width問題）

具體可以參考之前的文章小花帶你一周入門html+css（四）CSS進階之盒子模型與文檔流丨【WEB前端大作戰】

關于前端的碎碎念2-CSS裝修之盒子模型

w3c標準中

盒子的實際寬度 =padding+ border + 實體化width

需要：寬高基礎之上減去相應的padding和border值

ie6等低版本瀏覽器中

盒子的寬度 = 實體化的width

需要：寬高基礎之上加上相應的padding和border值

注意：如果padding的值過大，超過盒子width的一半，那么同樣能夠看到盒子變大的現場，因為padding值撐起了盒子。

解決方案：

用ie6的特殊字符解決，

即 用一個正常的width值，在用一個針對ie6的width值，并且放后面

例如：

.box{ width:500px; _width:530px; padding:0 15px; }

3.overflow清除浮動兼容

給浮動的元素父級增加overflow:hidden;_zoom:1;清除浮動

4.文本框text和按鈕button對齊問題-在不同的瀏覽器中顯示效果不同

出現這個兼容情況的條件：

text和button同時出現

button按鈕沒有value值，只有一個小圖標代替

使用浮動解決

給text增加float:left屬性

5.ie6雙邊距問題

當外邊距方向和浮動方向相同，在ie6瀏覽器中，一定會出現雙倍邊距問題

解決方法：在出現問題的盒子上加_display:inline;

6.圖片鏈接在ie10及以下中有邊框

圖片鏈接，而且鏈接必須有href屬性

解決方案

給img增加border:0;或者border:none;屬性

我們可以在清除標簽的默認樣式時加入border:none;

7.ie9及以下圖片img底部留白問題

書寫不規范

div里面嵌套img標簽，而且img后面有一個空格，或者img標簽寫完之后換行，會出現底部留空問題

注：在html中，換行被瀏覽器解析成一個空格。

解決方法：

給div一個高度，并且用overflow:hidden減去多余部分

給img加display:block;

給div增加font-size:0; 因為空格也是一個字符，設置font-size:0;可以使字符消失

8.ie6空盒子最低高度為19px

一個不放任何內容的空盒子，即使設置盒子的高度小于19px，ie6會默認解析為19px；

-給盒子加overflow:hidden;

span{ width:10px; height:10px; background:url(xxx.jpg); overflow:hidden; }

-給backgorund加設置不平鋪

tips：我們在工作中，只要盒子的背景不平鋪，那我們就主動的去添加no-repeat;

span{ width:10px; height:10px; background:url(icon.jpg) no-repeat; }

-給span標簽設置line-height:0;font-size:0;

span{ width:10px; height:10px; background:url(xxx.jpg); line-height:0; font-size:0; }

9.Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 max-width/height在ie6中沒效果

解決方法：

.box{ border:1px blue solid; width:200px; height:200px; } html>body .box{ width:auto; height:auto; min-width:200px; min-height:200px; }

或者

.box{ width:200px; height:200px; _width:200px; _height:200px; }

因為ie6有一個特征，當定義一個高度時，如果內容超過高度，元素會自動調整高度。

10.ie6 不支持 fixed

/*對于非IE6可以這樣寫*/ #top{ position:fixed; bottom:0; right:20px; } /*但是IE6是不支持fixed定位的，需要另外重寫*/ #top{ position:fixed; _position:absolute; top:0; right:20px; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } /*使用hack使IE6實現該效果，但這個東東會閃爍，需要以下代碼*/ *html{ background-image:url(about:blank); background-attachment:fixed; } /*使固定在頂部*/ #top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } /*固定在底部*/ #top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0))); } /*垂直居中*/ #top{ position:fixed; top:50%; margin-top:-50px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); }

11.解決 ie6 最大、最小寬高 hack方法

/* 最小寬度 */ .min_width{ min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth); } /* 最大寬度 */ .max_width{ max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth); } /* 最小高度 */ .min_height{ min-height:200px; _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight); } /* 最大高度 */ .max_height{ max-height:400px; _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight); }

濾鏡效果opacity

CSS 透明算得上是一種相當流行的技術，但在跨瀏覽器支持上，對于開發者來說，可以說是一件令人頭疼的事情。目前還沒有一個通用方法，以確保透明度設置可以在目前使用的所有瀏覽器上有效，但是總得來說它是一個巨大的變革。關于 CSS 透明度，有一點需要注意的是，它雖然使用了很多年，但它一直以來都不是一個標準屬性，它是一種非標準技術，應該是 CSS3 規范的一部分。

opacity定義元素的不透明度

filter：alpha（opacity=80）；/*ie支持該屬性*/ ? opacity：0.8；/*支持css3的瀏覽器*/

我們做個透明效果的例子來了解一下

華為云鯤鵬云服務與解決方案

background:#000;

filter:alpha(opacity=60);

opacity:0.6;

為關鍵代碼，當 opacity 值為1時，表示完全不透明，為0時表示完全透明。

opacity: 0.3；這是“最重要的”，因為它是在 CSS 的現行標準。這將在 Firefox，Safari 和 Opera 的大多數版本的工作。這將是你所需要的一切如果所有的瀏覽器都支持目前的標準。當然是他們不會錯。

filter:alpha(opacity=30);這一個是針對IE瀏覽器

-moz-opacity:0.3;你需要這一個支持老版本的 Mozilla 瀏覽器如 Netscape Navigator。

-khtml-opacity: 0.3;這是舊版本的 Safari（1.×）當渲染引擎是使用仍被稱為 kthml，而不是目前的WebKit。

.transparent_class { filter:alpha(opacity=50);//標準的css透明度，在大部分的標準瀏覽器Firefox, Safari, and Opera都有效 opacity:0.5;//兼容IE解決方案 -moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.幾乎沒有可以不需要 -khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用 }

tips學習小技巧:

學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什么苦。。。既然學習這么痛苦，為什么不快樂一點學呢？anyway~希望大家可以成為一個優秀的前端！資歷有限，錯誤難免，歡迎大力指正。

【WEB前端大作戰】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。