標(biāo)簽歸檔：IE

修正IE6不支持position:fixed的bug

由 發(fā)表于 ┊1,739 PV

眾所周知IE6不支持position:fixed，這個(gè)bug與IE6的雙倍margin和不支持PNG透明等bug一樣臭名昭著。前些天我做自己的博客模板的時(shí)候，遇到了這個(gè)問(wèn)題。當(dāng)時(shí)就簡(jiǎn)單的無(wú)視了IE6——盡管有幾個(gè)使用IE6的朋友，一起B(yǎng)S我……但是對(duì)于大項(xiàng)目或商業(yè)網(wǎng)站，如果有用到這個(gè)屬性的時(shí)候，是不可能直接無(wú)視的。

你是如何讓position:fixed在IE6中工作的？

本文所使用的技巧是用了一條Internet Explorer的CSS表達(dá)式(expression)。你不可以直接使用該表達(dá)式，因?yàn)樗赡軙?huì)因?yàn)榫彺娑桓隆＝鉀Q這一點(diǎn)的最簡(jiǎn)單的方式是使用eval包裹你的語(yǔ)句。
如何解決“振動(dòng)”的問(wèn)題？

顯然IE有一個(gè)多步的渲染進(jìn)程。當(dāng)你滾動(dòng)或調(diào)整你的瀏覽器大小的時(shí)候，它將重置所有內(nèi)容并重畫(huà)頁(yè)面，這個(gè)時(shí)候它就會(huì)重新處理css表達(dá)式。這會(huì)引起一個(gè)丑陋的“振動(dòng)”bug，在此處固定位置的元素需要調(diào)整以跟上你的(頁(yè)面的)滾動(dòng)，于是就會(huì)“跳動(dòng)”。
繼續(xù)閱讀 →

IE與Firefox的CSS兼容大全

由 發(fā)表于 ┊1,979 PV

CSS對(duì)瀏覽器器的兼容性具有很高的價(jià)值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點(diǎn)。

常見(jiàn)兼容問(wèn)題：

1、DOCTYPE 影響 CSS 處理

2、FF：div 設(shè)置 margin-left， margin-right 為 auto 時(shí)已經(jīng)居中，IE 不行

3、FF: body 設(shè)置 text-align 時(shí)， div 需要設(shè)置 margin: auto(主要是 margin-left，margin-right) 方可居中

4、FF: 設(shè)置 padding 后， div 會(huì)增加 height 和 width， 但 IE 不會(huì)， 故需要用 !important 多設(shè)一個(gè) height 和 width

5、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設(shè)置樣式

6、div 的垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行

7、cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

8、FF: 鏈接加邊框和背景色，需設(shè)置 display: block， 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar， 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位， 若不設(shè) height， 可以在 menubar 中插入一個(gè)空格。
繼續(xù)閱讀 →

如何讓IE6-IE7-FF的CSS樣式一致

由 發(fā)表于 ┊2,130 PV

現(xiàn)在主流的瀏覽器分別是：Internet Explorer 6， Internet Explorer 7和Firefox 2。這讓我們?cè)诰W(wǎng)站設(shè)計(jì)中不得不考慮如何使樣式“crossover”。這里介紹一個(gè)較為簡(jiǎn)單的方法使樣式的顯示效果在上述三種瀏覽器中保持一致。

首先我們針對(duì)Firefox 2設(shè)計(jì)了如下的樣式代碼：

1
#MyDiv { margin : 10px 10px 10px 10px; }

然后針對(duì)Internet Explorer 6進(jìn)行樣式修改，使用如下的代碼語(yǔ)句，該代碼只能被 IE 6 識(shí)別：

1
2
/* IE6 Only */
* html #MyDiv { margin : 5px 5px 5px 5px; }

最后針對(duì)Internet Explorer 7進(jìn)行如下樣式修改，該代碼也只能被 IE 7 識(shí)別：

1
2
/* IE7 Only */
*:first-child+html #MyDiv { margin : 2px 2px 2px 2px; }

通過(guò)上面的方法，你應(yīng)該能夠讓你的設(shè)計(jì)樣式更具通用性了。

轉(zhuǎn)自Smartr.cn