㈠ css布局中,IE6的3像素bug怎麼解決
這個不是bug 這個是ie 本身的問題 所有的ie都這樣 ie可以指定的最小高度是18px 所有小於18px的在ie下全部都會按照18px顯示 解決辦法只有一個 overflow:hidden 添加這個屬性就好 超出部分使其隱藏!
㈡ ie6下面的bug
現在都用9了~
㈢ IE6BUG,span 浮不上去
我覺得是你的思路bug,這種代碼根本不符合標准,何況span{ float:left; width:20px; 這里結尾處你還沒寫}
符合標準的代碼示例如下
<style>ul 的子元素只能是li,不允許出現<span>,另外>>這東西應該用實體字元>代替。代碼中的>>是網路bug,我敲的是>不知道你的那個是不是也是,否則請用>代替>
li{ margin-left:10px; float:left; width:20px; height:20px;}
li.arrow{margin-left: 0px; width:20px;}
</style>
<ul>
<li>1</li>
<li class="arrow">>></li>
<li>2</li>
<li class="arrow">>></li>
<li>3</li>
<li class="arrow">>></li>
</ul>
㈣ 尋求IE6.0所有BUG介紹
「BUG」的由來:
Bug一詞的原意是「臭蟲」或「蟲子」。但是現在,在電腦系統或程序中,如果隱藏著的一些未被發現的缺陷或問題,人們也叫它「Bug」,這是怎麼回事呢?
原來,第一代的計算機是由許多龐大且昂貴的真空管組成,並利用大量的電力來使真空管發光。可能正是由於計算機運行產生的光和熱,引得一隻小蟲子�Bug鑽進了一支真空管內,導致整個計算機無法工作。研究人員費了半天時間,總算發現原因所在,把這只小蟲子從真空管中取出後,計算機又恢復正常。後來,Bug這個名詞就沿用下來,表示電腦系統或程序中隱藏的錯誤、缺陷或問題。
與Bug相對應,人們將發現Bug並加以糾正的過程叫做「Debug」,意即「捉蟲子」或「殺蟲子」。遺憾的是,在中文裡面,至今仍沒有與「Bug」准確對應的詞彙,於是只能直接引用「Bug」一詞。雖然也有人使用「臭蟲」一詞替代「Bug」,但容易產生歧義,所以推廣不開。
所謂「(Bug)」,是指電腦系統的硬體、系統軟體(如操作系統)或應用軟體(如文字處理軟體)出錯。硬體的出錯有兩個原因,一是設計錯誤,一是硬體部件老化失效等。軟體的錯誤全是廠家設計錯誤。那種說用戶執行了非法操作的提示,是軟體廠商不負責的胡說八道。用戶可能會執行不正確的操作,比如本來是做加法但按了減法鍵。這樣用戶會得到一個不正確的結果,但不會引起bug發作。軟體廠商在設計產品時的一個基本要求,就是不允許用戶做非法的操作。只要允許用戶做的,都是合法的。用戶根本就沒有辦法知道廠家心裡是怎麼想的,哪些操作序列是非法的。
從電腦誕生之日起,就有了電腦BUG。第一個有記載的bug是美國海軍的編程員,編譯器的發明者格蕾斯·哈珀(GraceHopper)發現的。哈珀後來成了美國海軍的一個將軍,領導了著名計算機語言Cobol的開發。
1945年9月9日,下午三點。哈珀中尉正領著她的小組構造一個稱為「馬克二型」的計算機。這還不是一個完全的電子計算機,它使用了大量的繼電器,一種電子機械裝置。第二次世界大戰還沒有結束。哈珀的小組日以繼夜地工作。機房是一間第一次世界大戰時建造的老建築。那是一個炎熱的夏天,房間沒有空調,所有窗戶都敞開散熱。
突然,馬克二型死機了。技術人員試了很多辦法,最後定位到第70號繼電器出錯。哈珀觀察這個出錯的繼電器,發現一隻飛蛾躺在中間,已經被繼電器打死。她小心地用攝子將蛾子夾出來,用透明膠布帖到「事件記錄本」中,並註明「第一個發現蟲子的實例。」[1]
從此以後,人們將計算機錯誤戲稱為蟲子(bug),而把找尋錯誤的工作稱為(debug)。
㈤ IE6瀏覽器出現這種情況,怎麼解決
這種問題我也經常遇到過,原因有很多,不過我猜你一定是玩過什麼私服類的游戲吧?
0X000000該內存不能為read的解決方法
運行某些程序的時候,有時會出現內存錯誤的提示,然後該程序就關閉。
「0x????????」指令引用的「0x????????」內存。該內存不能為「read」。
「0x????????」指令引用的「0x????????」內存,該內存不能為「written」。
以上的情況相信大家都應該見到過,甚至說一些網友因為不爽於這個經常出現的錯誤提示而屢次重裝系統。相信普通用戶應該不會理解那些復雜的十六進制代碼。
出現這個現象有方面的,一是硬體,即內存方面有問題,二是軟體,這就有多方面的問題了。
一:先說說硬體:
一般來說,電腦硬體是很不容易壞的。內存出現問題的可能性並不大(除非你的內存真的是雜牌的一塌徒地),主要方面是:1。內存條壞了(二手內存情況居多)、2。使用了有質量問題的內存,3。內存插在主板上的金手指部分灰塵太多。4。使用不同品牌不同容量的內存,從而出現不兼容的情況。5。超頻帶來的散熱問題。你可以使用MemTest 這個軟體來檢測一下內存,它可以徹底的檢測出內存的穩定度。
二、如果都沒有,那就從軟體方面排除故障了。
先說原理:內存有個存放數據的地方叫緩沖區,當程序把數據放在緩沖區,需要操作系統提供的「功能函數」來申請,如果內存分配成功,函數就會將所新開辟的內存區地址返回給應用程序,應用程序就可以通過這個地址使用這塊內存。這就是「動態內存分配」,內存地址也就是編程中的「游標」。內存不是永遠都招之即來、用之不盡的,有時候內存分配也會失敗。當分配失敗時系統函數會返回一個0值,這時返回值「0」已不表示新啟用的游標,而是系統向應用程序發出的一個通知,告知出現了錯誤。作為應用程序,在每一次申請內存後都應該檢查返回值是否為0,如果是,則意味著出現了故障,應該採取一些措施挽救,這就增強了程序的「健壯性」。若應用程序沒有檢查這個錯誤,它就會按照「思維慣性」認為這個值是給它分配的可用游標,繼續在之後的執行中使用這塊內存。真正的0地址內存區儲存的是計算機系統中最重要的「中斷描述符表」,絕對不允許應用程序使用。在沒有保護機制的操作系統下(如DOS),寫數據到這個地址會導致立即當機,而在健壯的操作系統中,如Windows等,這個操作會馬上被系統的保護機制捕獲,其結果就是由操作系統強行關閉出錯的應用程序,以防止其錯誤擴大。這時候,就會出現上述的內存不能為「read」錯誤,並指出被引用的內存地址為「0x00000000「。內存分配失敗故障的原因很多,內存不夠、系統函數的版本不匹配等都可能有影響。因此,這種分配失敗多見於操作系統使用很長時間後,安裝了多種應用程序(包括無意中「安裝」的病毒程序),更改了大量的系統參數和系統檔案之後。
在使用動態分配的應用程序中,有時會有這樣的情況出現:程序試圖讀寫一塊「應該可用」的內存,但不知為什麼,這個預料中可用的游標已經失效了。有可能是 「忘記了」向操作系統要求分配,也可能是程序自己在某個時候已經注銷了這塊內存而「沒有留意」等等。注銷了的內存被系統回收,其訪問權已經不屬於該應用程序,因此讀寫操作也同樣會觸發系統的保護機制,企圖「違法」的程序唯一的下場就是被操作終止執行,回收全部資源。計算機世界的法律還是要比人類有效和嚴厲得多啊!像這樣的情況都屬於程序自身的BUG,你往往可在特定的操作順序下重現錯誤。無效游標不一定總是0,因此錯誤提示中的內存地址也不一定為 「0x00000000」,而是其它隨機數字。
首先建議:
1、 檢查系統中是否有木馬或病毒。這類程序為了控制系統往往不負責任地修改系統,從而導致操作系統異常。平常應加強信息安全意識,對來源不明的可執行程序絕不好奇。
2、 更新操作系統,讓操作系統的安裝程序重新拷貝正確版本的系統檔案、修正系統參數。有時候操作系統本身也會有BUG,要注意安裝官方發行的升級程序。
3、 盡量使用最新正式版本的應用程序、Beta版、試用版都會有BUG。
4、 刪除然後重新創建 Winnt\System32\Wbem\Repository 文件夾中的文件:在桌面上右擊我的電腦,然後單擊管理。在"服務和應用程序"下,單擊服務,然後關閉並停止 Windows Management Instrumentation 服務。 刪除 Winnt\System32\Wbem\Repository 文件夾中的所有文件。(在刪除前請創建這些文件的備份副本。)打開"服務和應用程序",單擊服務,然後打開並啟動 Windows Management Instrumentation 服務。當服務重新啟動時,將基於以下注冊表項中所提供的信息重新創建這些文件: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WBEM\CIMOM\Autorecover MOFs
下面搜集幾個例子給大家分析:
例一:IE瀏覽器出現「0x0a8ba9ef」指令引用的「0x03713644」 內存,或者「0x70dcf39f」指令引用的「0x00000000」內存。該內存不能為「read」。要終止程序,請單擊「確定」的信息框,單擊「確定」後,又出現「發生內部錯誤,您正在使用的其中一個窗口即將關閉」的信息框,關閉該提示信息後,IE瀏覽器也被關閉。解決方法:
1、 開始-運行窗口,輸入「regsvr32 actxprxy.dll」回車,接著會出現一個信息對話 框「DllRegisterServer in actxprxy.dll succeeded」,確定。再依次運行以下命令。(這個方法有人說沒必要,但重新注冊一下那些.dll對系統也沒有壞處,反正多方下手,能解決問題就行。)
regsvr32 shdocvw.dll
regsvr32 oleaut32.dll
regsvr32 actxprxy.dll
regsvr32 mshtml.dll
regsvr32 msjava.dll
regsvr32 browseui.dll
regsvr32 urlmon.dll
2、 修復或升級IE瀏覽器,同時打上系統補丁。看過其中一個修復方法是,把系統還原到系統初始的狀態下。建議將IE升級到了6.0。
例二:有些應用程序錯誤: 「0x7cd64998」 指令參考的 「0x14c96730」 內存。該內存不能為 「read」。解決方法:Win XP的「預讀取」技術這種最佳化技術也被用到了應用程序上,系統對每一個應用程序的前幾次啟動情況進行分析,然後新增一個描述套用需求的虛擬「內存映像」,並把這些信息儲存到Windows\Prefetch文件夾。一旦建立了映像,應用軟體的裝入速度大大提高。XP的預讀取數據儲存了最近8次系統啟動或應用軟體啟動的信息。建議將虛擬內存撤換,刪除Windows\Prefetch目錄下所有*.PF文件,讓windows重新收集程序的物理地址。
例三:在XP下雙擊光碟裡面的「AutoRun.exe」文件,顯示「0x77f745cc」指令引用的「0x00000078」內存。該內存不能為 「written」,要終止程序,請單擊「確定」,而在Windows 98里運行卻正常。解決方法:這可能是系統的兼容性問題,winXP的系統,右鍵「AutoRun.exe」文件,屬性,兼容性,把「用兼容模式運行這個程序」項選擇上,並選擇「Windows 98/Me」。win2000如果打了SP的補丁後,只要開始,運行,輸入:regsvr32 c:\winnt\apppatch\slayerui.dll。右鍵,屬性,也會出現兼容性的選項。
例四:RealOne Gold關閉時出現錯誤,以前一直使用正常,最近卻在每次關閉時出現「0xffffffff」指令引用的「0xffffffff」內存。該內存不能為 「read」 的提示。解決方法:當使用的輸入法為微軟拼音輸入法2003,並且隱藏語言欄時(不隱藏時沒問題)關閉RealOne就會出現這個問題,因此在關閉RealOne 之前可以顯示語言欄或者將任意其他輸入法作為當前輸入法來解決這個問題。
例五:我的豪傑超級解霸自從上網後就不能播放了,每次都提示「0x060692f6」(每次變化)指令引用的「0xff000011」內存不能為 「read」,終止程序請按確定。解決方法:試試重裝豪傑超級解霸,如果重裝後還會,到官方網站下載相應版本的補丁試試。還不行,只好換就用別的播放器試試了。
例六:雙擊一個游戲的快捷方式,「0x77f5cd0」指令引用「0xffffffff」內 存,該內存不能為「read」 ,並且提示Client.dat程序錯誤。解決方法:重裝顯卡的最新驅動程序,然後下載並且安裝DirectX9.0。
例七:一個朋友發信息過來,我的電腦便出現了錯誤信息:「0x772b548f」指令引用的「0x00303033」內存,該內存不能為 「written」,然後QQ自動下線,而再打開QQ,發現了他發過來的十幾條的信息。解決方法:這是對方利用QQ的BUG,發送特殊的代碼,做QQ出錯,只要打上補丁或升級到最新版本,就沒事了。
㈥ ie6瀏覽器有哪些常見的bug,缺陷或者與標准不一致的地方,如何解決
1、打開IE→工具→internet選項常規
2、轉到「高級」選擇卡,點擊重置即可恢復初始狀態。重啟一下即可。
㈦ ie6下雙邊距bug的產生原因是什麼
出現雙邊距的條件是當浮動元素的浮動方向和margin的方向一致時才會出現。也就是說,並不是只有塊狀元素左浮動,且具有左外邊距時才有這個BUG,當一個盒子右浮動的同時有一個向右的margin-right的時候,IE6也會把margin-right解析為原來的2倍。當有多個同行元素都浮動了,而且都有同方向的margin,則只有最靠近浮動方向的元素有雙邊距bug。
解決這個bug有兩個方法:
1.給float的元素添加一個display:inline
2.給ie6寫一個hack,其值是正常值的一半,即_margin-right:10px;這個方法不推薦,因為要加hack寫法,而這個是要盡量避免寫的。但是這個正好能夠說明這個bug的真實存在。
㈧ 如何處理瀏覽器IE6,IE7,IE8,css bug兼容性
1:li邊距「無故」增加
任何事情都是有原因的,li邊距也不例外。
先描述一下具體狀況:有些時候li邊距會突然增 加很多,值也不固定(只在IE6/IE7有這種現象),讓人摸不著頭腦,仔細「研究」發現是由於其低級元素ul的padding引 起,padding的上下值對li有影響,左右無影 響。所以只好笨手笨腳地把padding去掉,換成margin。這是能解決問題,但往往不是我們想要的結果,或許 還會引起其他不必要的怪現象。
現在終於發現解決這個問題的方法,其實很簡單,既然是有ul引 起的,就設置ul的顯示形式為*display:inline-block;即可,前面加*是只 針對IE6/IE7有效,其他瀏覽器並不渲染這個屬性。
2
2:分頁數字 字體用「Arial 」加粗不抖動
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>無標題文檔</title>
<link href="css/style.css"rel="stylesheet"type="text/css"/>
<style type="text/css">
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;
background-color:#0CF;
color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;
background-color:#FFF;
color:#000;
font-weight:bold;
}
</style>
</head>
<body>
<h1>分頁樣式</h1>
<div class="page"> <a href="#">1</a> <a href="#"class="selected">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>
<a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div>
</body>
</html>
3
3:IE6 CSS選擇器區分IE6
IE6不支持子選擇器;先針對IE6使用常規申明CSS選擇器,然後再用子選擇器針對IE7+及其他瀏覽器。
/*IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
div>p .content {color:blue;}
4
4:IE6最小高度
IE6 不支持min-height屬性,但它卻認為height就是最小高度。解決方法:
使用ie6不支持但其餘瀏覽器支持的屬性!important。
#container{min-height:200px; height:auto !important; height:200px;}
sp;{color:blue;}
5
5:IE6100% 高度
在IE6下,如果要給元素定義100%高度,必須要明確定義它的父級元素的高度,如果你需要給元素定義滿屏的高度,就得
先給html和body定義height:100%;。
n>
sp;{color:blue;}
6
6:IE6躲貓貓bug
在IE6和IE7下,躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素,如果在他之後有不浮動的內容,並且有一
些定義了:hover的鏈接,當滑鼠移到那些鏈接上時,在IE6下就會觸發躲貓貓。
解決方法很簡單:
1.在(那個未浮動的)內容之後添加一個<span style="clear: both;"> </span>
2.觸發包含了這些鏈接的容器的hasLayout,一個簡單的方法就是給其定義height:1%;
7
7:IE6絕對定位元素的1像素間距bug
IE6下的這個錯誤是由於進位處理誤差造成(IE7已修復),當絕對定位元素的父元素高或寬為奇數時,bottom和right會
產生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值,但對於液態布局沒有完美的解決方法。
8
8: IE下z-index的bug
在IE瀏覽器中,定位元素的z-index層級是相對於各自的父級容器,所以會導致z-index出現錯誤的表現。解決方法是給
其父級元素定義z-index,有些情況下還需要定義position:relative。
�決方法。
9
9: Overflow Bug
在IE6/7中,overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上
position:relative;。
10
10: 橫向列表寬度bug
如果你使用float:left;把<li>橫向擺列,並且<li>內包含的<a>(或其他)觸發了 hasLayout,在IE6下就會有錯誤的
表現。解決方法很簡單,只需要給<a>定義同樣的float:left;即可。
11: 列表階梯bug
列表階梯bug通常會在給<li>的子元素<a>使用float:left;時觸發,我們本意是要做一個橫向的列表(通常 是導航欄),
但IE卻可能呈現出垂直的或者階梯狀。解決辦法就是給<li>定義float:left;而非子元素<a>,或者 給<li>定義
display:inline;也可以解決。
12: 垂直列表間隙bug
當我們使用<li> 包含一個塊級子元素時,IE6(IE7也有可能)會錯誤地給每條列表元素(<li>)之間添加空隙。
解決方法:把<a>flaot並且清除float來解決這個問題;另外一個辦法就是觸發<a>的hasLayout(如定 義高寬、
使用zoom:1;);也可以給<li> 定義display:inline;來解決此問題;另外還有一個極有趣的方法,給包含的文
本末尾添加一個空格。
13: IE6調整窗口大小的 Bug
當把body居中放置,改變IE瀏覽器大小的時候,任何在body裡面的相對定位元素都會固定不動了。解決辦法:
給body定義position:relative;就行了。
14: 文本重復Bug
在IE6中,一些隱藏的元素(如注釋、display:none;的元素)被包含在一個浮動元素里,就有可能引發文本重復bug。
解決辦法:給浮動元素添加display:inline;。
15:鏈接a的title屬性中的文字換行
我們都知道,可以給鏈接a加上title屬性,這樣滑鼠移動上去會顯示title屬性定義的 文字,常常用來加一些提示語句,
比如說點擊查看詳情之類的,代碼形如:
<a href=」#」 title=」點擊查看詳情」>鏈接xx</a>
。之前一直沒有仔細注意過這個東西。如果滑鼠浮動上去要顯示更多東西的話,怎麼實現呢。第一 反應是jquery的tooltip插件。今天無意中發現某個學院的網站滑鼠移動上去可以顯示這么完整的信息,效果看起來似乎還可以,就想看看怎麼做的, 找了下,沒發現有Javascript腳本,再往鏈接的地方一看,終於讓我發現了門道了:
<a href='#' target="_blank" title="標題: 關於對我校2006年至2009年發展黨員工作情況進…
發布日期: 2010-5-31 16:05:08類別:院務通知 點擊: 139">
[05-31] 關於對我校2006年至2009年發展黨員工作情況進…
</a>
注意到了嗎。。很簡單,只要使用 這樣的轉義符號,即可實現換行。在一些tooltip要求定製性不高的情況下,這樣的顯示效果相 當不錯,而且是瀏覽器原生的效果,安逸。
哎,雖然號稱精通div+css,但是發現一些小小但是很實用的技巧自己還不知道,看來html還有很多東西可以挖掘。
16:如何去掉點擊鏈接時的虛線
解決方案1:在<a href="http://blog.sina.com/wangfengteacher"onFocus="this.blur()> Mike blog</a>
解決方案2:在標簽中加入 hidefocus<a href="http://blog.sina.com/wangfengteacher"hidefocus> Mike blog</a>
解決方案3: 如果連接太多,可以用外部鏈接 .HTC 文件。如,blur.htc
文件內容如下:
<public:attach event="onfocus"
onevent="makeblur()"></public:attach>
<SCRIPT language=javascript>
function makeblur(){
this.blur();
}
</SCRIPT>
在 CSS 中加入如下代碼:
A { behavior:url(blur.htc); }
解決方案4 ( 推薦 ):使用CSS樣式,可加入代碼:a {blr:expression_r(this.onFocus=this.blur())}
如果是FF等瀏覽器的話可這樣寫 a{ouline:none;}
17:製作1px細線表格
解決方案1 ( 推薦):我們只要給這個table一個border-collapse:collapse的樣式,就可以達到這個效果了。
具體如下:
1、HTML結構:
<table width="300" border="1" cellpadding="0"cellspacing="0" bordercolor="#C0C0C0"
style="border-collapse:collapse;">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
18:IE6 下z-index無效
在CSS中,通過z-index這個屬性改變層級,要讓z-index起作用有個前提,就是元素的position屬性要 是 relative,absolute或是fixed。
z-index層級越高,內容越應該在上面顯示。在大部分的瀏覽器在大部分的情況下,確實如此,但是不絕對,尤其遇到IE6。
1、關於效果截圖的些必要說明
下面的不是廢話,是為了更容易的理解我下面唾沫橫飛的內容。
以下所有結果截圖的大背景如下:
1、頁面上固定不動的,一成不變的,送豪宅也不會從良的是一個黑色背景,透明度 40%,幾乎滿屏顯示的層級為1的絕對定位層。HTML為:
<div></div>
對應CSS 為:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是為了讓層級關系一目瞭然。看:
這說明內容在z-index為1的絕對定位層之下。
這說明內容在z-index為1的絕對定位層之上。
2、頁面上做對比的是美女圖片,圖片在半透明黑色絕對定位層的上面還是下面很容易辨別,這樣,您就能夠對我所說的z- index不起作用有很直觀的認識了。
2、IE6的抱怨:浮動讓我沉淪
現在開始真正的講述 問題的產生,原因以及解決了。首先講講第一種z-index無論設置多高都不起作用情況。這種情況發生的條件有三個:1、父標簽 position屬性為relative;2、問題標簽無position屬性(不包括static);3、問題標簽含有浮動(float)屬性。
您 可以拿下面的代碼自己做個簡單測試:
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>
丫的,這z-index都9999了,層級夠高吧,但是,看下面的圖:
這一對比就知道問題了,可能有人會疑問,這會不會是IE6的relative自己感冒了,而不是浮動(float)攜帶 了「甲流病毒」。好,我現在去掉浮動,HTML代碼如下:
<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>
結果IE6下:
我想,問題應該都清楚了,至於原因,我起初以為是haslayout搞的鬼,後來,用zoom一測試,發現不是(IE7 下無此bug也證明不是 haslayout的原因),似乎就是這個float會讓z-index失效。由於將外部div的position:relative屬性改為 absolute可以解決這一問題,我就懷疑是不是浮動讓relative發生了些變化,float與relative在水平定位上可以說是近親,會不會 是因為這兩者攪和在一起所以什麼「畸形」「體弱多病」就出現了。這僅是我的猜測而已,真正的原因還是去問IE6的後媽吧。
解決方法,解決方法有三,1、position:relative改 為position:absolute;2、去除浮動;3、浮動 元素添加 position屬性(如relative,absolute等)。
3、固執的IE6:它只認第一個爸爸
可能不少人知 道,這IE6下,層級的高低不僅要看自己,還要看自己的老爸這個後台是否夠硬。用術語具體描述為:
父標簽position屬性為relative 或absolute時,子標簽的absolute屬性是相對於父標簽而言的。而在IE6下,層級的表現有時候不是看子標簽的z-index多高,而要看它 們的父標簽的z-index誰高誰低。
有一定經驗的人可能都知道上面的事實。但是,相信這裡面很多人不知道IE6下,決定層級高低的不是當前的父標簽,而是整 個DOM tree(節點樹)的第一個relative屬性的父標簽。有時平時我們多處理一個父標簽,z-index層級多而復雜的情況不多見,所以難免會有認識上 的小小偏差。
好,下面展示這個bug。
條件很簡單,只要絕對定位的第一個元素的第一個爸爸,或者說是最老的那個爸爸級別的人的relative屬性小於黑色半 透明層的z-index層級。例如下面的HTML代碼:
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
可以看到,mm3圖片的父標簽div 是絕對定位,層級9999,比1大多了,絕對定位的父標簽層級1000(10000也一樣),也比黑色半透明層的z-index:1大多了,但是,我們可 憐的IE6童鞋——
再看看以Firefox為代表的其他童鞋:
IE7與IE6有著同樣的bug,原因很簡單,雖然圖片所在div當前的老爸層級很高(1000),但是由於老爸的老爸 不頂用,可憐了9999如此強勢的孩子沒有出頭之日啊!
知道原因解決就很輕鬆了,給第一任老爸添加z-index後的HTML代 碼如下:
<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
結果IE6童鞋喜笑顏開,春光燦爛:
19:css reset中的list-style:none
在IE6,7下,當UL不具有float:left;display:inline;時:
無論有沒有list-style:none這個屬性,列 表符都被隱藏,不佔位置(下面代碼中的5,6)
當UL具有float:left;display:inline;屬性時
list- style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);
未 設置list-style:none;列表符被隱藏,也不佔位(list-style-position:outside)
在firefox中只要list-style-type為none ,則 無論list-stype-position的值為outside或 inside , list-style都能很好的被隱藏
而在IE6,7中,僅 設置list-style:none,並不足以解決所有問題
所以我認為在css reset的時候使用 list-style:none outside none 更好
20:鏈接去邊線(完全兼容)
a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}
21: display:inline-block 額外產生的6PX 或者4px margin
今天在做一個Timeline的模塊的時候遇到一個棘手的問題: 給元素添加display:inline-block 屬性的時候會產生額外的 4px的margin-right。
原始代碼
.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;
background-color:#00FF00;
position:relative;
}
頁面渲染結果:
每一列都會向右產生外邊距4px,苦思不得其解,嘗試負的外邊距,但是涉及到其他的問題:每個li標簽會重疊1-2個px,妨礙到滑鼠hover 狀 態的事件。嘗試修改doctype類型也不見效果。後來嘗試了另外一個方法:
把原來的HTML 代碼結構:
更改為:
這樣就不會產生額外的外邊距,也弄不清楚為什麼會出現這種問題。先暫時記下,以後再研究研究。
㈨ 萬惡的IE6,3像素BUG問題,求解決!!
可以在DIV裡面加一個屬性 overflow:hidden; 很好解決的,200分就不用了