IE6,IE7,IE8 css bug搜集及瀏覽器兼容性問題解決方法匯總
發(fā)布時間：2013-06-04 16:43:04 作者：佚名 
我要評論
我要評論斷斷續(xù)續(xù)的在開發(fā)過程中收集了好多的bug以及其解決的辦法，都在這個文章里面記錄下來了！希望對web前端開發(fā)有所幫助，也希望大家能在留言里面跟進自己發(fā)現(xiàn)的ie6 7 8bug和解決辦法
斷斷續(xù)續(xù)的在開發(fā)過程中收集了好多的bug以及其解決的辦法，都在這個文章里面記錄下來了！希望以后解決類似問題的時候能夠快速解決，也希望大家能在留言里面跟進自己發(fā)現(xiàn)的ie6 7 8bug和解決辦法！
1：li邊距“無故”增加
任何事情都是有原因的，li邊距也不例外。
先描述一下具體狀況：有些時候li邊距會突然增 加很多，值也不固定（只在IE6/IE7有這種現(xiàn)象），讓人摸不著頭腦，仔細“研究”發(fā)現(xiàn)是由于其低級元素ul的padding引 起，padding的上下值對li有影響，左右無影 響。所以只好笨手笨腳地把padding去掉，換成margin。這是能解決問題，但往往不是我們想要的結(jié)果，或許 還會引起其他不必要的怪現(xiàn)象。
解決這個問題的方法，其實很簡單，既然是有ul引 起的，就設(shè)置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對IE6/IE7有效，其他瀏覽器并不渲染這個屬性。
2：分頁數(shù)字 字體用“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：IE6 CSS選擇器區(qū)分IE6
IE6不支持子選擇器；先針對IE6使用常規(guī)申明CSS選擇器，然后再用子選擇器針對IE7+及其他瀏覽器。
/*IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
div>p .content {color:blue;}
4：IE6最小高度
IE6 不支持min-height屬性，但它卻認為height就是最小高度。解決方法：
使用ie6不支持但其余瀏覽器支持的屬性!important。
#container{min-height:200px; height:auto !important; height:200px;}
5：IE6100% 高度
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義height:100%;。
6：IE6躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素，如果在他之后有不浮動的內(nèi)容，并且有一些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發(fā)躲貓貓。
解決方法很簡單：
1.在（那個未浮動的）內(nèi)容之后添加一個<span style="clear: both;"> </span>
2.觸發(fā)包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;
7:IE6絕對定位元素的1像素間距bug
IE6下的這個錯誤是由于進位處理誤差造成（IE7已修復(fù)），當絕對定位元素的父元素高或?qū)挒槠鏀?shù)時，bottom和right會產(chǎn)生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對于液態(tài)布局沒有完美的解決方法。
8:IE下z-index的bug
在IE瀏覽器中，定位元素的z-index層級是相對于各自的父級容器，所以會導(dǎo)致z-index出現(xiàn)錯誤的表現(xiàn)。解決方法是給其父級元素定義z-index，有些情況下還需要定義position:relative。
9: Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。
10: 橫向列表寬度bug
如果你使用float:left;把<li>橫向擺列，并且<li>內(nèi)包含的<a>（或其他）觸發(fā)了 hasLayout，在IE6下就會有錯誤的表現(xiàn)。
解決方法很簡單，只需要給<a>定義同樣的float:left;即可。
11: 列表階梯bug
列表階梯bug通常會在給<li>的子元素<a>使用float:left;時觸發(fā)，我們本意是要做一個橫向的列表(通常 是導(dǎo)航欄)，但IE卻可能呈現(xiàn)出垂直的或者階梯狀。
解決辦法就是給<li>定義float:left;而非子元素<a>，或者 給<li>定義display:inline;也可以解決。
12: 垂直列表間隙bug
當我們使用<li> 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（<li>）之間添加空隙。
解決方法：把<a>flaot并且清除float來解決這個問題；另外一個辦法就是觸發(fā)<a>的hasLayout（如定 義高寬、使用zoom:1;）；也可以給<li> 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文本末尾添加一個空格。
13: IE6調(diào)整窗口大小的 Bug
當把body居中放置，改變IE瀏覽器大小的時候，任何在body里面的相對定位元素都會固定不動了。
解決辦法：給body定義position:relative;就行了。
14: 文本重復(fù)Bug
在IE6中，一些隱藏的元素（如注釋、display:none;的元素）被包含在一個浮動元素里，就有可能引發(fā)文本重復(fù)bug。
解決辦法：給浮動元素添加display:inline;。
15：鏈接a的title屬性中的文字換行
我們都知道，可以給鏈接a加上title屬性，這樣鼠標移動上去會顯示title屬性定義的 文字，常常用來加一些提示語句，比如說點擊查看詳情之類的，代碼形如：<a href=”#” title=”點擊查看詳情”>鏈接xx</a>。之前一直沒有仔細注意過這個東西。如果鼠標浮動上去要顯示更多東西的話，怎么實現(xiàn)呢。第一 反應(yīng)是jquery的tooltip插件。今天無意中發(fā)現(xiàn)某個學(xué)院的網(wǎng)站鼠標移動上去可以顯示這么完整的信息，效果看起來似乎還可以，就想看看怎么做的， 找了下，沒發(fā)現(xiàn)有Javascript腳本，再往鏈接的地方一看，終于讓我發(fā)現(xiàn)了門道了：<a href='#' target="_blank" title="標題: 關(guān)于對我校2006年至2009年發(fā)展黨員工作情況進…
發(fā)布日期: 2010-5-31 16:05:08 類別：院務(wù)通知 點擊: 139">[05-31] 關(guān)于對我校2006年至2009年發(fā)展黨員工作情況進…</a>很簡單，只要使用 這樣的轉(zhuǎn)義符號,即可實現(xiàn)換行。在一些tooltip要求定制性不高的情況下，這樣的顯示效果相 當不錯，而且是瀏覽器原生的效果，安逸。雖然號稱精通div+css，但是發(fā)現(xiàn)一些小小但是很實用的技巧自己還不知道，看來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
文件內(nèi)容如下：
<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結(jié)構(gòu):
<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層級越高，內(nèi)容越應(yīng)該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實如此，但是不絕對，尤其遇到IE6。
以下所有結(jié)果截圖的大背景如下：
1、頁面上固定不動的，一成不變的，送豪宅也不會從良的是一個黑色背景，透明度 40%，幾乎滿屏顯示的層級為1的絕對定位層。HTML為：
<div></div>
對應(yīng)CSS為：
#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是為了讓層級關(guān)系一目了然。看：
這說明內(nèi)容在z-index為1的絕對定位層之下。
這說明內(nèi)容在z-index為1的絕對定位層之上。
2、頁面上做對比的是美女圖片，圖片在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣，您就能夠?qū)ξ宜f的z- index不起作用有很直觀的認識了。
2、IE6的抱怨：浮動讓我沉淪
現(xiàn)在開始真正的講述 問題的產(chǎn)生，原因以及解決了。首先講講第一種z-index無論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個：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)攜帶 了“甲流病毒”。好，我現(xiàn)在去掉浮動，HTML代碼如下：
<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>
結(jié)果IE6下：
我想，問題應(yīng)該都清楚了，至于原因，我起初以為是haslayout搞的鬼，后來，用zoom一測試，發(fā)現(xiàn)不是（IE7 下無此bug也證明不是 haslayout的原因），似乎就是這個float會讓z-index失效。由于將外部div的position:relative屬性改為 absolute可以解決這一問題，我就懷疑是不是浮動讓relative發(fā)生了些變化，float與relative在水平定位上可以說是近親，會不會 是因為這兩者攪和在一起所以什么“畸形”“體弱多病”就出現(xiàn)了。這僅是我的猜測而已，真正的原因還是去問IE6的后媽吧。
解決方法，解決方法有三，1、position:relative改 為position:absolute；2、去除浮動；3、浮動 元素添加position屬性（如relative，absolute等）。
3、固執(zhí)的IE6：它只認第一個爸爸
可能不少人知 道，這IE6下，層級的高低不僅要看自己，還要看自己的老爸這個后臺是否夠硬。用術(shù)語具體描述為：
父標簽position屬性為relative 或absolute時，子標簽的absolute屬性是相對于父標簽而言的。而在IE6下，層級的表現(xiàn)有時候不是看子標簽的z-index多高，而要看它 們的父標簽的z-index誰高誰低。
有一定經(jīng)驗的人可能都知道上面的事實。但是，相信這里面很多人不知道IE6下，決定層級高低的不是當前的父標簽，而是整 個DOM tree（節(jié)點樹）的第一個relative屬性的父標簽。有時平時我們多處理一個父標簽，z-index層級多而復(fù)雜的情況不多見，所以難免會有認識上 的小小偏差。
好，下面展示這個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>
結(jié)果IE6童鞋喜笑顏開，春光燦爛：
19：css reset中的list-style:none
在IE6,7下,當UL不具有float:left;display:inline;時:無論有沒有l(wèi)ist-style:none這個屬性,列 表符都被隱藏,不占位置(下面代碼中的5,6)當UL具有float:left;display:inline;屬性時list- style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);未 設(shè)置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)在firefox中只要list-style-type為none ,則 無論list-stype-position的值為outside或inside , list-style都能很好的被隱藏而在IE6,7中,僅 設(shè)置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 額外產(chǎn)生的6PX 或者4px margin
今天在做一個Timeline的模塊的時候遇到一個棘手的問題： 給元素添加display:inline-block 屬性的時候會產(chǎn)生額外的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;
}
頁面渲染結(jié)果：
每一列都會向右產(chǎn)生外邊距4px，苦思不得其解，嘗試負的外邊距，但是涉及到其他的問題:每個li標簽會重疊1-2個px，妨礙到鼠標hover狀 態(tài)的事件。嘗試修改doctype類型也不見效果。后來嘗試了另外一個方法：把原來的HTML 代碼結(jié)構(gòu)：更改為：這樣就不會產(chǎn)生額外的外邊距，也弄不清楚為什么會出現(xiàn)這種問題。先暫時記下，以后再研究研究。
22: IE6中偽類:hover的使用及BUG
以前未曾遇到類似的問題，一番google，才知道這是IE6處理CSS偽類:hover的Bug。例如如下的代碼：
<style>
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘寶網(wǎng) <span> 淘你喜歡 </span></a>
在IE7/FF中，鼠標移動到鏈接上時，”淘你喜歡”字樣會變?yōu)榧t色，但IE6則無反應(yīng)。所以IE6的bug就是如果a 與 a:hover 的css定義是一樣的，也就是說如果a:hover 中沒有樣式的改變，hover就不會被觸發(fā)。但如果在a:hover{}增加一些特定的屬性，例如
a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}
此時hover就可以觸發(fā)了。
23：原來IE6支持!important
.demo { color:#F00!important; color:#000; }/*IE6顯示錯誤理解：.demo顯示為黑色*/
/*而下面IE6是正確理解的：.demo顯示為紅色*/
.demo { color:#F00!important;}
.demo { color:#000; }
24:去掉button按鈕左右兩邊的留白
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{padding:0; margin:0}
input,button{overflow:visible;padding:0;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="button按鈕左右留白的解決方法" />
</form>
<button><span>button按鈕左右留白的解決方法</span></button>
</body>
</html>
25:中文字體在css中的寫法
黑體SimHei\9ED1\4F53黑體
宋體SimSun\5B8B\4F53宋體
新宋體 NSimSun\65B0\5B8B\4F53新宋體
仿宋FangSong\4EFF\5B8B仿宋
楷體KaiTi\6977\4F53 楷體
微軟正黑體Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微軟正黑體
微軟雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微軟雅黑
幼圓 YouYuan\5E7C\5706幼圓
26： ie6里width:100%是相對于上有高度設(shè)置的元素 其他瀏覽器是相對于上個相對定位或絕對定位的元素
<div style=" width:600px; height:600px; background:#000;">
<div style=" width:500px; height:500px; background:#333;">
<div style=" float:left; background:#666; width:400px;" >
<div style=" width:300px; height:300px; background:#999;">
<div style=" width:100%; height:100%; background:#f00; position:absolute; left:0; top:0;">
在非ie6的瀏覽器中都是滿屏幕的紅， 說明非ie6的瀏覽器的width和height的百分比，都是相對的上個相對定位或者絕對定位的元素，沒有就為html元素，而ie6中的width和height 的百分比，相對的是上個有高寬顯示設(shè)置的元素，而且height的百分比設(shè)置失效，所以上述代碼在ie6中就出現(xiàn)寬度穿越了他的父元素而遇見width:500px;的元素的時候，邊把自己設(shè)置成了width:500px;而height的設(shè)置則失效， 這個， 讓人很蛋疼！ie6，真的該早點走了！
</div>
</div>
</div>
</div>
</div>
27： ie不緩存背景圖片的解決辦法
高性能web開發(fā)中，一張小小的圖片請求能省的就省，可IE6存在不緩存背景圖的bug.如果重復(fù)使用了一個圖片作為背景，那么每用一次就會重新去服務(wù)器拉一次。。。給服務(wù)器帶來巨大的壓力。解決方法有兩種，
1：采用JS
var ua = navigator.userAgent.toLowerCase();
var isIE6 = ua.indexOf("msie 6") > -1;//判斷是否為IE6
// remove css image flicker
//IE6下默認不緩存背景圖片，CSS里每次更改圖片的位置時都會重新發(fā)起請求，用這個方法告訴IE6緩存背景圖片
if(isIE6){
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
}
2.在頁面上直接使用1個DIV元素來加載該圖片，這樣加載圖片就能真正被緩存，鼠標移動也不會發(fā)送請求了。
28:ie6下css實現(xiàn)max/min-width/height
_width:expression(this.width>300?"300px":ture); max-width:300px;
_height:expression(this.height>300?"300px":ture); max-height:300px;
29：css空白外邊距互相疊加的解決方法
body{width:300px; font-family:'微軟雅黑'; font-size:1em; text-indent:10px; line-height:1.25;}
div{background:#000;margin:10px;}
div p{background:#f60;margin:15px}
這是一個div元素內(nèi)嵌套p的簡單樣例,先別復(fù)制保存為html測試,在你看完上面的代碼后,你是否以為它出為你呈現(xiàn)如下圖的效果?
好,現(xiàn)在你可以復(fù)制上面代碼,保存到本地,然后在瀏覽器中打開.你會驚訝的發(fā)現(xiàn),它呈現(xiàn)給你的效果是這樣的:
為什么會這樣呢?按CSS中,對于有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離.故,子元素的頂部和底部空白邊就突出到元素的外圍了.p元素的15px外邊距與div元素的10px的外邊距形成一個單一的15px垂直空白邊,另外,形式的這個空白邊并非為div所包圍,而是呈現(xiàn)在div的外圍.所以,我們看到了第二張效果圖.
如何解決?本人比較推薦兩種解決方式:
其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid #ddd;
其二,為外圍元素定義內(nèi)邊距填充..具體到本例,即在樣式div中加入padding:1px
另外,還可以通過外圍元素絕對定位,或者定義子元素浮動等方式實現(xiàn).
30：純css解決多行文字垂直居中
<style type="text/css">
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
line-height:1.5em;
border:1px solid red;
}
.alert_blank{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
}
.alert_con{
width:100%;
zoom:1;
display:inline;
vertical-align:middle;
}
</style>
<div class="alert">
<div class="alert_con">哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～</div>
</div>
其大概原理為：第一個alert_blank容器，display:inline以后作為行內(nèi)元素，它的高度為100%，寬度卻為0，相當于緊貼外層容器左邊框的一條透明的線，這樣就使得外層容器里面只存在一行。外層容易的vertical-align:middle使得其內(nèi)部相當于一行文字垂直居中。真正盛放內(nèi)容的div也是display:inline，它對外和blank垂直居中，只要內(nèi)部文字不超過blank的高度，這個效果將是完美的。雖然從語義化上講，用空白div布局說不太過去，但是瑕不掩瑜。另：zoom:1是為了觸發(fā)hasLayout。
31:關(guān)于flash遮蓋div浮動層
(a) place Flash embed script in <div> container (I use SWFObject.js)[將flash嵌入腳本放到一個div容器中]
(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入腳本]
(c) set <div id="flashcontent"> container with z-index:-1; [將外層容器的z-index設(shè)置為-1]
(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)
(e) set floating iframe in container with z-index: 99;[將浮動的iframe在容器中的zindex設(shè)置為99]
(f) use CSS to position flashcontent and htmlcontent containers.[使用css來調(diào)整flash容器和html容器的位置]
其他方案網(wǎng)上比較多見,不做闡述.在此說下使用第一個方案如何解決:
var so = new SWFObject("XXX.swf", "flashId", "寬度", "高度", "版本", "背景色");
//設(shè)置flash不遮蓋div層
so.addParam("wmode", "opaque");
so.write("flashcontent");
如此設(shè)置即可讓flash無法遮蓋住div
32:如何處理ie6的文字行高
ie6下漢字就會顯示偏上位置，而在標準瀏覽器中不存在這個問題字體 Tahoma,試下
不過如果有規(guī)定第一個字體是用啥的，那就只能忽略這個問題..我終于明白淘寶為啥把Tahoma字體放到第一位了
<!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=utf-8" />
<title>測試ie6的文字行高表現(xiàn)</title>
<style type="text/css">
body,ul,li,p {margin:0;padding:0;}
body { font:12px/1.5 Tahoma,"宋體",Arial, Helvetica, sans-serif; }
ul {float:left;list-style:none; margin-bottom:10px;}
ul li, p { margin-top:4px;background:silver;clear:left;}
ul li {float:left;margin-top:4px;}
</style>
</head>
<body>
<ul>
<li>歲月不饒人哪</li>
<li>hjgt</li>
</ul>
<p>歲月不饒人哪</p>
<p>hjgt</p>
</body>
</html>
33:利用 CSS 跨瀏覽器地隱藏文字一法
ont-size:0; // for firefox & opera
color: transparent; // for webkit
overflow:hidden; // for IE
font-size:0;
filter:alpha(opacity=0);
自測后兼容的瀏覽器如下：
IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6
34:button在chrome下默認有2px的margin
<button>在chrome下有兩像素margin</button>
35:ie6和ie7里面margin失效
<div style="padding:20px;background:#f00;">
<div style="background:#fff;height:200px;margin:50px;">我的margin在ie里面失效了</div>
解決辦法去掉里面div的高度
1：li邊距“無故”增加
任何事情都是有原因的，li邊距也不例外。
先描述一下具體狀況：有些時候li邊距會突然增 加很多，值也不固定（只在IE6/IE7有這種現(xiàn)象），讓人摸不著頭腦，仔細“研究”發(fā)現(xiàn)是由于其低級元素ul的padding引 起，padding的上下值對li有影響，左右無影 響。所以只好笨手笨腳地把padding去掉，換成margin。這是能解決問題，但往往不是我們想要的結(jié)果，或許 還會引起其他不必要的怪現(xiàn)象。
解決這個問題的方法，其實很簡單，既然是有ul引 起的，就設(shè)置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對IE6/IE7有效，其他瀏覽器并不渲染這個屬性。
2：分頁數(shù)字 字體用“Arial ”加粗不抖動
復(fù)制代碼
代碼如下:<!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：IE6 CSS選擇器區(qū)分IE6
IE6不支持子選擇器；先針對IE6使用常規(guī)申明CSS選擇器，然后再用子選擇器針對IE7+及其他瀏覽器。
復(fù)制代碼
代碼如下:/*IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
div>p .content {color:blue;}
4：IE6最小高度
IE6 不支持min-height屬性，但它卻認為height就是最小高度。解決方法：
使用ie6不支持但其余瀏覽器支持的屬性!important。
復(fù)制代碼
代碼如下:#container{min-height:200px; height:auto !important; height:200px;}
5：IE6100% 高度
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義height:100%;。
6：IE6躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個非常惱人的問題。一個撐破了容器的浮動元素，如果在他之后有不浮動的內(nèi)容，并且有一些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發(fā)躲貓貓。
解決方法很簡單：
1.在（那個未浮動的）內(nèi)容之后添加一個<span style="clear: both;"> </span>
2.觸發(fā)包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;
7:IE6絕對定位元素的1像素間距bug
IE6下的這個錯誤是由于進位處理誤差造成（IE7已修復(fù)），當絕對定位元素的父元素高或?qū)挒槠鏀?shù)時，bottom和right會產(chǎn)生錯誤。唯一的解決辦法就是給父元素定義明確的高寬值，但對于液態(tài)布局沒有完美的解決方法。
8:IE下z-index的bug
在IE瀏覽器中，定位元素的z-index層級是相對于各自的父級容器，所以會導(dǎo)致z-index出現(xiàn)錯誤的表現(xiàn)。解決方法是給其父級元素定義z-index，有些情況下還需要定義position:relative。
9: Overflow Bug
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。
10: 橫向列表寬度bug
如果你使用float:left;把<li>橫向擺列，并且<li>內(nèi)包含的<a>（或其他）觸發(fā)了 hasLayout，在IE6下就會有錯誤的表現(xiàn)。
解決方法很簡單，只需要給<a>定義同樣的float:left;即可。
11: 列表階梯bug
列表階梯bug通常會在給<li>的子元素<a>使用float:left;時觸發(fā)，我們本意是要做一個橫向的列表(通常 是導(dǎo)航欄)，但IE卻可能呈現(xiàn)出垂直的或者階梯狀。
解決辦法就是給<li>定義float:left;而非子元素<a>，或者 給<li>定義display:inline;也可以解決。
12: 垂直列表間隙bug
當我們使用<li> 包含一個塊級子元素時，IE6(IE7也有可能)會錯誤地給每條列表元素（<li>）之間添加空隙。
解決方法：把<a>flaot并且清除float來解決這個問題；另外一個辦法就是觸發(fā)<a>的hasLayout（如定 義高寬、使用zoom:1;）；也可以給<li> 定義display:inline;來解決此問題；另外還有一個極有趣的方法，給包含的文本末尾添加一個空格。
13: IE6調(diào)整窗口大小的 Bug
當把body居中放置，改變IE瀏覽器大小的時候，任何在body里面的相對定位元素都會固定不動了。
解決辦法：給body定義position:relative;就行了。
14: 文本重復(fù)Bug
在IE6中，一些隱藏的元素（如注釋、display:none;的元素）被包含在一個浮動元素里，就有可能引發(fā)文本重復(fù)bug。
解決辦法：給浮動元素添加display:inline;。
15：鏈接a的title屬性中的文字換行
我們都知道，可以給鏈接a加上title屬性，這樣鼠標移動上去會顯示title屬性定義的 文字，常常用來加一些提示語句，比如說點擊查看詳情之類的，代碼形如：<a href=”#” title=”點擊查看詳情”>鏈接xx</a>。之前一直沒有仔細注意過這個東西。如果鼠標浮動上去要顯示更多東西的話，怎么實現(xiàn)呢。第一 反應(yīng)是jquery的tooltip插件。今天無意中發(fā)現(xiàn)某個學(xué)院的網(wǎng)站鼠標移動上去可以顯示這么完整的信息，效果看起來似乎還可以，就想看看怎么做的， 找了下，沒發(fā)現(xiàn)有Javascript腳本，再往鏈接的地方一看，終于讓我發(fā)現(xiàn)了門道了：<a href='#' target="_blank" title="標題: 關(guān)于對我校2006年至2009年發(fā)展黨員工作情況進…
發(fā)布日期: 2010-5-31 16:05:08 類別：院務(wù)通知 點擊: 139">[05-31] 關(guān)于對我校2006年至2009年發(fā)展黨員工作情況進…</a>很簡單，只要使用 這樣的轉(zhuǎn)義符號,即可實現(xiàn)換行。在一些tooltip要求定制性不高的情況下，這樣的顯示效果相 當不錯，而且是瀏覽器原生的效果，安逸。雖然號稱精通div+css，但是發(fā)現(xiàn)一些小小但是很實用的技巧自己還不知道，看來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
文件內(nèi)容如下：
復(fù)制代碼
代碼如下:<public:attach event="onfocus"
onevent="makeblur()"></public:attach>
<SCRIPT language=javascript>
function makeblur(){
this.blur();
}
</SCRIPT>
在 CSS 中加入如下代碼：
復(fù)制代碼
代碼如下: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結(jié)構(gòu):
復(fù)制代碼
代碼如下:<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層級越高，內(nèi)容越應(yīng)該在上面顯示。在大部分的瀏覽器在大部分的情況下，確實如此，但是不絕對，尤其遇到IE6。
以下所有結(jié)果截圖的大背景如下：
1、頁面上固定不動的，一成不變的，送豪宅也不會從良的是一個黑色背景，透明度 40%，幾乎滿屏顯示的層級為1的絕對定位層。HTML為：
<div></div>
對應(yīng)CSS為：
復(fù)制代碼
代碼如下:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
作用是為了讓層級關(guān)系一目了然。看：
這說明內(nèi)容在z-index為1的絕對定位層之下。
這說明內(nèi)容在z-index為1的絕對定位層之上。
2、頁面上做對比的是美女圖片，圖片在半透明黑色絕對定位層的上面還是下面很容易辨別，這樣，您就能夠?qū)ξ宜f的z- index不起作用有很直觀的認識了。
2、IE6的抱怨：浮動讓我沉淪
現(xiàn)在開始真正的講述 問題的產(chǎn)生，原因以及解決了。首先講講第一種z-index無論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個：1、父標簽 position屬性為relative；2、問題標簽無position屬性（不包括static）；3、問題標簽含有浮動(float)屬性。
您 可以拿下面的代碼自己做個簡單測試：
復(fù)制代碼
代碼如下:<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)攜帶 了“甲流病毒”。好，我現(xiàn)在去掉浮動，HTML代碼如下：
復(fù)制代碼
代碼如下:<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>
結(jié)果IE6下：
我想，問題應(yīng)該都清楚了，至于原因，我起初以為是haslayout搞的鬼，后來，用zoom一測試，發(fā)現(xiàn)不是（IE7 下無此bug也證明不是 haslayout的原因），似乎就是這個float會讓z-index失效。由于將外部div的position:relative屬性改為 absolute可以解決這一問題，我就懷疑是不是浮動讓relative發(fā)生了些變化，float與relative在水平定位上可以說是近親，會不會 是因為這兩者攪和在一起所以什么“畸形”“體弱多病”就出現(xiàn)了。這僅是我的猜測而已，真正的原因還是去問IE6的后媽吧。
解決方法，解決方法有三，1、position:relative改 為position:absolute；2、去除浮動；3、浮動 元素添加position屬性（如relative，absolute等）。
3、固執(zhí)的IE6：它只認第一個爸爸
可能不少人知 道，這IE6下，層級的高低不僅要看自己，還要看自己的老爸這個后臺是否夠硬。用術(shù)語具體描述為：
父標簽position屬性為relative 或absolute時，子標簽的absolute屬性是相對于父標簽而言的。而在IE6下，層級的表現(xiàn)有時候不是看子標簽的z-index多高，而要看它 們的父標簽的z-index誰高誰低。
有一定經(jīng)驗的人可能都知道上面的事實。但是，相信這里面很多人不知道IE6下，決定層級高低的不是當前的父標簽，而是整 個DOM tree（節(jié)點樹）的第一個relative屬性的父標簽。有時平時我們多處理一個父標簽，z-index層級多而復(fù)雜的情況不多見，所以難免會有認識上 的小小偏差。
好，下面展示這個bug。
條件很簡單，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小于黑色半 透明層的z-index層級。例如下面的HTML代碼：
復(fù)制代碼
代碼如下:<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代 碼如下：
復(fù)制代碼
代碼如下:<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>
結(jié)果IE6童鞋喜笑顏開，春光燦爛：
19：css reset中的list-style:none
在IE6,7下,當UL不具有float:left;display:inline;時:無論有沒有l(wèi)ist-style:none這個屬性,列 表符都被隱藏,不占位置(下面代碼中的5,6)當UL具有float:left;display:inline;屬性時list- style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);未 設(shè)置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)在firefox中只要list-style-type為none ,則 無論list-stype-position的值為outside或inside , list-style都能很好的被隱藏而在IE6,7中,僅 設(shè)置list-style:none,并不足以解決所有問題所以我認為在css reset的時候使用 list-style:none outside none 更好
20：鏈接去邊線（完全兼容）
復(fù)制代碼
代碼如下:a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}
21: display:inline-block 額外產(chǎn)生的6PX 或者4px margin
今天在做一個Timeline的模塊的時候遇到一個棘手的問題： 給元素添加display:inline-block 屬性的時候會產(chǎn)生額外的4px的margin-right。
原始代碼
復(fù)制代碼
代碼如下:.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;
}
頁面渲染結(jié)果：
每一列都會向右產(chǎn)生外邊距4px，苦思不得其解，嘗試負的外邊距，但是涉及到其他的問題:每個li標簽會重疊1-2個px，妨礙到鼠標hover狀 態(tài)的事件。嘗試修改doctype類型也不見效果。后來嘗試了另外一個方法：把原來的HTML 代碼結(jié)構(gòu)：更改為：這樣就不會產(chǎn)生額外的外邊距，也弄不清楚為什么會出現(xiàn)這種問題。先暫時記下，以后再研究研究。
22: IE6中偽類:hover的使用及BUG
以前未曾遇到類似的問題，一番google，才知道這是IE6處理CSS偽類:hover的Bug。例如如下的代碼：
復(fù)制代碼
代碼如下:<style>
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘寶網(wǎng) <span> 淘你喜歡 </span></a>
在IE7/FF中，鼠標移動到鏈接上時，”淘你喜歡”字樣會變?yōu)榧t色，但IE6則無反應(yīng)。所以IE6的bug就是如果a 與 a:hover 的css定義是一樣的，也就是說如果a:hover 中沒有樣式的改變，hover就不會被觸發(fā)。但如果在a:hover{}增加一些特定的屬性，例如
復(fù)制代碼
代碼如下:a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}
此時hover就可以觸發(fā)了。
23：原來IE6支持!important
復(fù)制代碼
代碼如下:.demo { color:#F00!important; color:#000; }/*IE6顯示錯誤理解：.demo顯示為黑色*/
/*而下面IE6是正確理解的：.demo顯示為紅色*/
.demo { color:#F00!important;}
.demo { color:#000; }
24:去掉button按鈕左右兩邊的留白
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{padding:0; margin:0}
input,button{overflow:visible;padding:0;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="button按鈕左右留白的解決方法" />
</form>
<button><span>button按鈕左右留白的解決方法</span></button>
</body>
</html>
25:中文字體在css中的寫法
黑體SimHei\9ED1\4F53黑體
宋體SimSun\5B8B\4F53宋體
新宋體 NSimSun\65B0\5B8B\4F53新宋體
仿宋FangSong\4EFF\5B8B仿宋
楷體KaiTi\6977\4F53 楷體
微軟正黑體Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微軟正黑體
微軟雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微軟雅黑
幼圓 YouYuan\5E7C\5706幼圓
26： ie6里width:100%是相對于上有高度設(shè)置的元素 其他瀏覽器是相對于上個相對定位或絕對定位的元素
復(fù)制代碼
代碼如下:<div style=" width:600px; height:600px; background:#000;">
<div style=" width:500px; height:500px; background:#333;">
<div style=" float:left; background:#666; width:400px;" >
<div style=" width:300px; height:300px; background:#999;">
<div style=" width:100%; height:100%; background:#f00; position:absolute; left:0; top:0;">
在非ie6的瀏覽器中都是滿屏幕的紅， 說明非ie6的瀏覽器的width和height的百分比，都是相對的上個相對定位或者絕對定位的元素，沒有就為html元素，而ie6中的width和height 的百分比，相對的是上個有高寬顯示設(shè)置的元素，而且height的百分比設(shè)置失效，所以上述代碼在ie6中就出現(xiàn)寬度穿越了他的父元素而遇見width:500px;的元素的時候，邊把自己設(shè)置成了width:500px;而height的設(shè)置則失效， 這個， 讓人很蛋疼！ie6，真的該早點走了！
</div>
</div>
</div>
</div>
</div>
27： ie不緩存背景圖片的解決辦法
高性能web開發(fā)中，一張小小的圖片請求能省的就省，可IE6存在不緩存背景圖的bug.如果重復(fù)使用了一個圖片作為背景，那么每用一次就會重新去服務(wù)器拉一次。。。給服務(wù)器帶來巨大的壓力。解決方法有兩種，
1：采用JS
復(fù)制代碼
代碼如下:var ua = navigator.userAgent.toLowerCase();
var isIE6 = ua.indexOf("msie 6") > -1;//判斷是否為IE6
// remove css image flicker
//IE6下默認不緩存背景圖片，CSS里每次更改圖片的位置時都會重新發(fā)起請求，用這個方法告訴IE6緩存背景圖片
if(isIE6){
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
}
2.在頁面上直接使用1個DIV元素來加載該圖片，這樣加載圖片就能真正被緩存，鼠標移動也不會發(fā)送請求了。
28:ie6下css實現(xiàn)max/min-width/height
復(fù)制代碼
代碼如下:_width:expression(this.width>300?"300px":ture); max-width:300px;
_height:expression(this.height>300?"300px":ture); max-height:300px;
29：css空白外邊距互相疊加的解決方法
復(fù)制代碼
代碼如下:body{width:300px; font-family:'微軟雅黑'; font-size:1em; text-indent:10px; line-height:1.25;}
div{background:#000;margin:10px;}
div p{background:#f60;margin:15px}
這是一個div元素內(nèi)嵌套p的簡單樣例,先別復(fù)制保存為html測試,在你看完上面的代碼后,你是否以為它出為你呈現(xiàn)如下圖的效果?
好,現(xiàn)在你可以復(fù)制上面代碼,保存到本地,然后在瀏覽器中打開.你會驚訝的發(fā)現(xiàn),它呈現(xiàn)給你的效果是這樣的:
為什么會這樣呢?按CSS中,對于有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離.故,子元素的頂部和底部空白邊就突出到元素的外圍了.p元素的15px外邊距與div元素的10px的外邊距形成一個單一的15px垂直空白邊,另外,形式的這個空白邊并非為div所包圍,而是呈現(xiàn)在div的外圍.所以,我們看到了第二張效果圖.
如何解決?本人比較推薦兩種解決方式:
其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid #ddd;
其二,為外圍元素定義內(nèi)邊距填充..具體到本例,即在樣式div中加入padding:1px
另外,還可以通過外圍元素絕對定位,或者定義子元素浮動等方式實現(xiàn).
30：純css解決多行文字垂直居中
復(fù)制代碼
代碼如下:<style type="text/css">
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
line-height:1.5em;
border:1px solid red;
}
.alert_blank{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
}
.alert_con{
width:100%;
zoom:1;
display:inline;
vertical-align:middle;
}
</style>
<div class="alert">
<div class="alert_con">哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～</div>
</div>
其大概原理為：第一個alert_blank容器，display:inline以后作為行內(nèi)元素，它的高度為100%，寬度卻為0，相當于緊貼外層容器左邊框的一條透明的線，這樣就使得外層容器里面只存在一行。外層容易的vertical-align:middle使得其內(nèi)部相當于一行文字垂直居中。真正盛放內(nèi)容的div也是display:inline，它對外和blank垂直居中，只要內(nèi)部文字不超過blank的高度，這個效果將是完美的。雖然從語義化上講，用空白div布局說不太過去，但是瑕不掩瑜。另：zoom:1是為了觸發(fā)hasLayout。
31:關(guān)于flash遮蓋div浮動層
(a) place Flash embed script in <div> container (I use SWFObject.js)[將flash嵌入腳本放到一個div容器中]
(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入腳本]
(c) set <div id="flashcontent"> container with z-index:-1; [將外層容器的z-index設(shè)置為-1]
(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)
(e) set floating iframe in container with z-index: 99;[將浮動的iframe在容器中的zindex設(shè)置為99]
(f) use CSS to position flashcontent and htmlcontent containers.[使用css來調(diào)整flash容器和html容器的位置]
其他方案網(wǎng)上比較多見,不做闡述.在此說下使用第一個方案如何解決:
var so = new SWFObject("XXX.swf", "flashId", "寬度", "高度", "版本", "背景色");
//設(shè)置flash不遮蓋div層
so.addParam("wmode", "opaque");
so.write("flashcontent");
如此設(shè)置即可讓flash無法遮蓋住div
32:如何處理ie6的文字行高
ie6下漢字就會顯示偏上位置，而在標準瀏覽器中不存在這個問題字體 Tahoma,試下
不過如果有規(guī)定第一個字體是用啥的，那就只能忽略這個問題..我終于明白淘寶為啥把Tahoma字體放到第一位了
復(fù)制代碼
代碼如下:<!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=utf-8" />
<title>測試ie6的文字行高表現(xiàn)</title>
<style type="text/css">
body,ul,li,p {margin:0;padding:0;}
body { font:12px/1.5 Tahoma,"宋體",Arial, Helvetica, sans-serif; }
ul {float:left;list-style:none; margin-bottom:10px;}
ul li, p { margin-top:4px;background:silver;clear:left;}
ul li {float:left;margin-top:4px;}
</style>
</head>
<body>
<ul>
<li>歲月不饒人哪</li>
<li>hjgt</li>
</ul>
<p>歲月不饒人哪</p>
<p>hjgt</p>
</body>
</html>
33:利用 CSS 跨瀏覽器地隱藏文字一法
復(fù)制代碼
代碼如下:ont-size:0; // for firefox & opera
color: transparent; // for webkit
overflow:hidden; // for IE
font-size:0;
filter:alpha(opacity=0);
自測后兼容的瀏覽器如下：
IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6
34:button在chrome下默認有2px的margin
<button>在chrome下有兩像素margin</button>
35:ie6和ie7里面margin失效
復(fù)制代碼
代碼如下:<div style="padding:20px;background:#f00;">
<div style="background:#fff;height:200px;margin:50px;">我的margin在ie里面失效了</div>
解決辦法去掉里面div的高度
相關(guān)文章
這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-12-16新版chrome瀏覽器設(shè)置允許跨域的實現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-11-30css hack之\9和\0就可能對hack IE11\IE9\IE8無效
每次設(shè)計一張網(wǎng)頁或一個表單，都被各種瀏覽器的兼容問題傷透腦筋，尤其是IE家族。在做兼容性設(shè)計時，我們往往會使用各種瀏覽器能識別的獨特語法進行hack，從而達到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20
這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-02-28
這篇文章主要介紹了常見的瀏覽器兼容性問題(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-02-20
這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-02-12- 這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題，詳細的介紹了幾種我遇到的問題和解決方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-26
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-14
這篇文章主要介紹了對常見的css屬性進行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-20
