ie浏览器css怎么调,IE浏览器下的CSS问题小结
IE瀏覽器下的CSS問(wèn)題小結(jié)
發(fā)布時(shí)間：2012-10-11 23:52:59 ? 作者：佚名 ? 我要評(píng)論
IE瀏覽器下的CSS問(wèn)題小結(jié)，需要的朋友可以參考下
IE下的特殊情況
下面是14條特殊情況你看一下是哪個(gè)問(wèn)題出錯(cuò)了這些僅供參考：
1. 文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實(shí)際占高16px，下留白3px，ff 下實(shí)際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設(shè)定 line-height 。確保所有文字都有默認(rèn)的 line-height 值。這點(diǎn)很重要，在高度上我們不能容忍1px 的差異。
2.ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會(huì)被內(nèi)容撐大，而ie下是會(huì)被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。
3.橫向上的撐破容器問(wèn)題，。如果float 容器未定義寬度，ff下內(nèi)容會(huì)盡可能撐開(kāi)容器寬度，ie下則會(huì)優(yōu)先考慮內(nèi)容折行。故，內(nèi)容可能撐破的浮動(dòng)容器需要定義width。
小實(shí)驗(yàn)：有興趣大家可以看看這段實(shí)驗(yàn)。在不同瀏覽器下分別測(cè)試以下各項(xiàng)代碼。
a.
c.
上面的代碼在不同瀏覽器中是不一樣的，實(shí)驗(yàn)起源于對(duì)小height 值div 的運(yùn)用，
4.最被痛恨的，double-margin bug。ie6下給浮動(dòng)容器定義margin-left 或者margin-right 實(shí)際效果是數(shù)值的2倍。解決方案，給浮動(dòng)容器定義display:inline。
5.mirror margin bug，當(dāng)外層元素內(nèi)有float元素時(shí)，外層元素如定義margin-top:14px，將自動(dòng)生成margin-bottom:14px。 padding也會(huì)出現(xiàn)類似問(wèn)題，都是ie6下的特產(chǎn)，該類bug 出現(xiàn)的情況較為復(fù)雜，遠(yuǎn)不只這一種出現(xiàn)條件，還沒(méi)系統(tǒng)整理。解決方案：外層元素設(shè)定border 或 設(shè)定float。
引申：ff 和ie 下對(duì)容器的margin-bottom，padding-bottom的解釋有時(shí)不一致，似乎與之相關(guān)。
6. 吞吃現(xiàn)象。還是ie6，上下兩個(gè)div，上面的div設(shè)置背景，卻發(fā)現(xiàn)下面沒(méi)有設(shè)置背景的div 也有了背景，這就是吞吃現(xiàn)象。對(duì)應(yīng)上面的背景吞吃現(xiàn)象，還有滾動(dòng)下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個(gè)zoom好象是專門為解決ie6 bug而生的。
7.注釋也能產(chǎn)生bug~~~“多出來(lái)的一只豬。”這是前人總結(jié)這個(gè)bug使用的文案，ie6的這個(gè)bug 下，大家會(huì)在頁(yè)面看到豬字出現(xiàn)兩遍，重復(fù)的內(nèi)容量因注釋的多少而變。解決方案：用“ picRotate start ”方法寫注釋。
8.img 下的留白，大家看這段代碼有啥問(wèn)題：
把div的border打開(kāi)，你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫
后面兩個(gè)標(biāo)簽要緊挨著。ie7下這個(gè)bug 依然存在。解決方案：給img設(shè)定 display:block。
9. 失去line-height。
文字，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是這個(gè)inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來(lái)。引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調(diào)整img 和文字讓他們?cè)趇e和ff下能一致，你會(huì)發(fā)現(xiàn)怎么調(diào)都不會(huì)讓你滿意。索性讓img 和文字都 float起來(lái)，用margin 調(diào)整。
10.clear層應(yīng)該單獨(dú)使用。也許你為了節(jié)省代碼把clear屬性直接放到下面的一個(gè)內(nèi)容層，這樣有問(wèn)題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會(huì)失效
ddff11.ie 下overflow:hidden對(duì)其下的絕對(duì)層position:absolute或者相對(duì)層 position:relative無(wú)效。解決方案：給overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
12.ie6下嚴(yán)重的bug，float元素如沒(méi)定義寬度，內(nèi)部如有div定義了height或zoom:1，這個(gè)div就會(huì)占滿一整行，即使你給了寬度。float元素如果作為布局用或復(fù)雜的容器，都要給個(gè)寬度的。
13.ie6下的bug，絕對(duì)定位的div下包含相對(duì)定位的div，如果給內(nèi)層相對(duì)定位的div高度height具體值，內(nèi)層相對(duì)層將具有100%的width值，外層絕對(duì)層將被撐大。解決方案給內(nèi)層相對(duì)層float屬性。
14.width:100%這個(gè)東西在ie里用很方便，會(huì)向上逐層搜索width值，忽視浮動(dòng)層的影響，ff下搜索至浮動(dòng)層結(jié)束，如此，只能給中間的所有浮動(dòng)層加width:100%才行，累啊。opera這點(diǎn)倒學(xué)乖了跟了ie。
ie的float bug(ie6,ie7)使前端工程師們?yōu)橹_,最常見(jiàn)的現(xiàn)象就是:當(dāng)浮動(dòng)元素的父級(jí)元素在拖動(dòng)滾動(dòng)條的時(shí)候出現(xiàn)邊框的缺失,對(duì)于此類問(wèn)題的解決方案就是使浮動(dòng)元素獲得布局.
在諸多的情況中,因?yàn)轫?yè)面需要寬度自由伸縮而不能申明寬度為固定值,但我們可以設(shè)置*height:1%;,*在這里可謂是舉足輕重,因?yàn)?只能被ie7及以下版本解析,ie8并不識(shí)別此類寫法,所以可以使用這個(gè)寫法來(lái)區(qū)別ie8和其他版本號(hào)的ie瀏覽器.對(duì)網(wǎng)上流行的ie8 beta1的hack,也算是一個(gè)補(bǔ)充.
一些常用的hack測(cè)試
* html p {color:red;} 支持 IE6 不支持FF IE7 IE8b
*+html p {color:red;} 支持 IE7 IE8b 不支持FF IE6
p {*color:red;} 支持 IE7 IE6 不支持FF IE8b
IE8 中增加了 CSS3 中的子串匹配的屬性選擇器(substring matching attribute selectors)，具體規(guī)則與正則中的匹配很相似：
E[att^=’val’] //子串以’val’ 開(kāi)始
E[att$=’val’] //子串以’val’ 結(jié)束
E[att*=’val’] //子串中包含’val’
IE8 支持絕大多數(shù)基本的 CSS2.1 選擇器，不支持的包括但不限于：[:first-line] 、[:first-letter]。
對(duì)于 CSS2.1 中的 generated content 部分，即通過(guò)使用偽元素 :before 和 :after 添加文本內(nèi)容，IE8 中支持 并未完全 。
而對(duì)于幾乎在其他瀏覽器中都支持的 opacity 和 RGBA ，IE8 中依舊沒(méi)有支持。
對(duì)于原來(lái)用來(lái)區(qū)分 IE 的 HACK 在 IE8 中基本失效(比如*property:value、*property:value等)。
原有 IE 的 list-item whitespace bug 在 IE8 中依舊存在。
原有 IE 的 z-index bug 在 IE8 中依舊存在。
IE8 中產(chǎn)生新的 bug：當(dāng) line-heigth 小于正常值時(shí)，超出的部分將被裁切掉。
IE8 中依然不支持 display:table 。
IE8 中依然不支持 border 的 transparent 值。
IE8 中 @import 只支持三層嵌套。
IE8中 border的 transparent 不被支持
IE8中產(chǎn)生新的BUG：line-heigth BUG
只針對(duì)IE8的hack，可以是屬性也可以是類
BUG描述：
頁(yè)面中某DIV使用了position:relative，結(jié)合top=-25px等元素定位。在FF和IE7下表現(xiàn)正常，但是在IE6中該DIV會(huì)隨鼠標(biāo)滾動(dòng)而滾動(dòng)。
分析：
這是IE6一個(gè)已知的BUG：當(dāng)某position:relative元素被帶有overflow:auto/scroll屬性的塊級(jí)元素包含時(shí)，會(huì)表現(xiàn)出postion:absolute的行為。
解決方法：
1.為包含塊元素添加屬性position:relative 。
2.把該元素的position:relative屬性去掉，使用默認(rèn)的static定位，并通過(guò)margin-top等屬性實(shí)現(xiàn)類似的效果。
ie6的末日即將來(lái)臨,對(duì)我們前端開(kāi)發(fā)人員來(lái)說(shuō),無(wú)疑是一個(gè)慰藉人心的喜訊.但這個(gè)末日也并非朝日可至,所以我們還是爭(zhēng)取最后的勝利,用各種 hack和方法來(lái)規(guī)避ie6下雙邊距,背景透明,重復(fù)文字等等一堆bug.下面是轉(zhuǎn)載自前端觀察(譯自www.sitepoint.com)中的10個(gè)修復(fù)ie6下bug技巧:
1. 使用DOCTYPE
你應(yīng)該在一直每個(gè)HTML文件的頭部都使用DOCTYPE，并且我們推薦使用strict 版本，比如：
或者，對(duì)于XHTML使用:
你需要處理的最棘手的事情就是IE6進(jìn)入quirks模式——它已經(jīng)夠詭異了。
2. 設(shè)置position: relative
將一個(gè)元素設(shè)置為”position:relative”可以解決很多問(wèn)題，特別是你曾經(jīng)遇到隱藏的或?qū)R詭異的盒子。顯然，你需要非常小心點(diǎn)兒，因?yàn)榻^對(duì)定位的子節(jié)點(diǎn)可能會(huì)因此重新定位。
3. 將浮動(dòng)元素設(shè)置為display:inline
具有margin屬性的浮動(dòng)元素可能引起著名的IE6雙倍margin問(wèn)題，比如，你為一個(gè)元素指定margin-left為5px，但是IE6中實(shí)際上卻表現(xiàn)為10px。”display:inline”將解決這個(gè)問(wèn)題，盡管這不是必須的，你的CSS仍然是有效的。
4. 將一個(gè)元素設(shè)置為hasLayout
很多IE6(和IE7)的渲染問(wèn)題可以通過(guò)設(shè)置元素的hasLayout來(lái)解決。這是一個(gè)IE內(nèi)部屬性(IE隱藏的，更多關(guān)于haslayout的資料，可以參閱這里)，用來(lái)確定相對(duì)于其他元素，內(nèi)容是如何布局和定位的。如果你需要設(shè)置一個(gè)inline元素(比如一個(gè)鏈接)為block元素，或者是應(yīng)用透明效果，設(shè)置hasLayout也可能是必須的。
最簡(jiǎn)單的設(shè)置 hasLayout的方法是為CSS設(shè)置一個(gè)高度或?qū)挾?zoom也可以用，但是zoom并不是CSS標(biāo)準(zhǔn)的一部分)。我們推薦設(shè)置實(shí)際尺寸，但是問(wèn)題是這是不現(xiàn)實(shí)的，你可能需要使用”height:1%”。如果父元素并沒(méi)有設(shè)置高度，該元素的實(shí)際高度并不受影響，而且這個(gè)時(shí)候hasLayout已經(jīng)被啟用。
5. 修正重復(fù)文字bug
復(fù)雜的布局可以觸發(fā)在浮動(dòng)元素的最后一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個(gè)解決方法，有些是完美的，但是做一些反復(fù)試驗(yàn)也是必須的：
.確保所有的元素使用”display:inline;”
.在最后一個(gè)元素上使用一個(gè)”margin-right:-3px;”
.為浮動(dòng)元素的最后一個(gè)條目使用一個(gè)條件注釋，比如：
.在容器的最后元素使用一個(gè)空的div(它也有必要設(shè)置寬度為90%或類似寬度。
>>>>>>你還可以訪問(wèn)positioniseverything.net 查看該問(wèn)題的完整介紹。
6. 在可點(diǎn)擊和懸停的元素上只使用標(biāo)簽
IE6只認(rèn)識(shí)對(duì)a標(biāo)簽的CSS hover效果。
你也可以在基于JavaScript的組件內(nèi)使用他們來(lái)控制，以使他們保持鍵盤的可操作性。是有一些可替代的選擇，但是標(biāo)簽比其它方案更可靠。
7. 使用!important 或高級(jí)選擇器來(lái)區(qū)分IE6
不使用傳統(tǒng)Hack或在額外文件中的條件CSS的方法，寫出特別針對(duì)IE6的可行的代碼也還是有可能的。比如最小高度可以通過(guò)這段代碼來(lái)定義：
復(fù)制代碼代碼如下:
#element {
min-height: 20em;
height: auto !important;
height: 20em;
#element[id] {
height: auto;
}
8. 避免百分比單位
百分比會(huì)把IE搞糊涂的。除非你可以確切的控制每一個(gè)父元素的大小，才可能做到最佳預(yù)防。你可以通過(guò)!important在其他瀏覽器中繼續(xù)使用百分比，比如：
body {
margin: 2% 0 !important;
margin: 20px 0;
}
9. 盡早測(cè)試并不斷測(cè)試
不要等到你的網(wǎng)站或應(yīng)用完成了才測(cè)試IE6;這樣的話問(wèn)題可能更糟糕，而且會(huì)花更多時(shí)間來(lái)修正。如果你的網(wǎng)站能夠在Firefox和IE6中正常運(yùn)行，那么一般在其它瀏覽器就不會(huì)有問(wèn)題。
10. 重構(gòu)你的代碼
經(jīng)常發(fā)生的事情是，修正bug要比重新考慮一個(gè)布局問(wèn)題要花更長(zhǎng)的時(shí)間。對(duì)HTML做些小改動(dòng)和一些簡(jiǎn)單的CSS常常更有效。這可能意味著你要放棄完美的代碼，但是會(huì)出現(xiàn)較少的長(zhǎng)期問(wèn)題而且將來(lái)你會(huì)很清楚如果處理這些可能出現(xiàn)的問(wèn)題。
-------------------------------------------------------------------------------------------------------
讓IE6支持PNG格式的圖片
用法：
先復(fù)制下面的代碼在記事本中，然后另存為pngbehavior.htc(名字可以任意)：
復(fù)制代碼代碼如下:
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;
if (supported) fixImage();
function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
function afterPrint() {
isPrinting = false;
fixImage();
}
最后在你的css文件里面加上這么一段代碼：
img {behavior: url("pngbehavior.htc");}
相關(guān)文章
這篇文章主要介紹了關(guān)于CSS浮動(dòng)與取消浮動(dòng)的問(wèn)題，通過(guò)設(shè)置元素脫離正常的文檔流讓元素靠左或向右靠近，通過(guò)設(shè)置文字包周圍圖片來(lái)解決浮動(dòng)問(wèn)題，具體解決方法跟隨小編一起2021-06-28
本文介紹了什么是 ::marker 以及它的一些實(shí)用場(chǎng)景，可以看出雖然 ::before 、::after 也能實(shí)現(xiàn)類似的功能，但 CSS 還是提供了更具有語(yǔ)義化的標(biāo)簽 ::marker，也表明了大家需2021-06-25
很多前端的初學(xué)者,在使用margin的之后或許會(huì)遇到一些問(wèn)題，本文主要介紹了margin塌陷和margin合并，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-24
當(dāng)我們想寫一個(gè)類似掘金的文章或者自己的博客的時(shí)候，是否有想過(guò)該怎么實(shí)現(xiàn)給自己文章的章節(jié)添加章節(jié)號(hào)，本文就來(lái)介紹一下使用CSS實(shí)現(xiàn)章節(jié)添加自增序號(hào)的方法，感興趣的可2021-06-23
本文主要介紹了CSS變量實(shí)現(xiàn)主題切換的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-23
本文就將介紹一些使用單標(biāo)簽繪圖的技巧，并且使用這些技巧，借用單個(gè)標(biāo)簽去實(shí)現(xiàn)一些復(fù)雜圖形，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-06-16
這篇文章主要介紹了CSS幾步實(shí)現(xiàn)賽博朋克2077風(fēng)格視覺(jué)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-15
今天來(lái)帶大家做一個(gè)可愛(ài)的滑動(dòng)導(dǎo)航欄效果，這個(gè)demo很基礎(chǔ)，但是使用場(chǎng)景非常廣泛，感興趣的小伙伴們可以參考一下2021-06-15
大家都知道Calc方法有個(gè)很大的好處就是用在流體布局上，可以通過(guò)calc()計(jì)算得到元素的寬度，本文通過(guò)一個(gè)例子給大家詳細(xì)介紹，需要的朋友參考下吧2021-06-03
本文將給大家介紹使用 CSS prefers-* 規(guī)范提升網(wǎng)站的可訪問(wèn)性與健壯性的相關(guān)知識(shí)，在css媒體查詢中新增的幾個(gè)特征功能,本文也給大家詳細(xì)介紹，需要的朋友可以參考下2021-05-25
最新評(píng)論
總結(jié)
以上是生活随笔為你收集整理的ie浏览器css怎么调,IE浏览器下的CSS问题小结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 利用C语言读取WAV文件
- 下一篇： 常见的计算机端口及服务