日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

IE瀏覽器下的CSS問(wèn)題小結(jié)( 二 )

云知道


div style=background:red;float:left;dd/div
div style=clear:both;margin-top:18px;background:greenff/div

11.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技巧:

推薦閱讀