IE6,IE7,IE8 css bug搜集及瀏覽器兼容性問題解決方法匯總

2024-07-11 08:28:45

字體：大中小

供稿：網(wǎng)友

斷斷續(xù)續(xù)的在開發(fā)過程中收集了好多的bug以及其解決的辦法，都在這個(gè)文章里面記錄下來了！希望以后解決類似問題的時(shí)候能夠快速解決，也希望大家能在留言里面跟進(jìn)自己發(fā)現(xiàn)的ie6 7 8bug和解決辦法！
1：li邊距“無故”增加
　　任何事情都是有原因的，li邊距也不例外。
　　先描述一下具體狀況：有些時(shí)候li邊距會(huì)突然增加很多，值也不固定（只在IE6/IE7有這種現(xiàn)象），讓人摸不著頭腦，仔細(xì)“研究”發(fā)現(xiàn)是由于其低級(jí)元素ul的padding引起，padding的上下值對(duì)li有影響，左右無影響。所以只好笨手笨腳地把padding去掉，換成margin。這是能解決問題，但往往不是我們想要的結(jié)果，或許還會(huì)引起其他不必要的怪現(xiàn)象。
　　解決這個(gè)問題的方法，其實(shí)很簡(jiǎn)單，既然是有ul引起的，就設(shè)置ul的顯示形式為*display:inline-block;即可，前面加*是只針對(duì)IE6/IE7有效，其他瀏覽器并不渲染這個(gè)屬性。
2：分頁(yè)數(shù)字字體用“Arial ”加粗不抖動(dòng)

復(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>無標(biāo)題文檔</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>分頁(yè)樣式</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不支持子選擇器；先針對(duì)IE6使用常規(guī)申明CSS選擇器，然后再用子選擇器針對(duì)IE7+及其他瀏覽器。

復(fù)制代碼

代碼如下:
/*IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
div>p .content {color:blue;}

4：IE6最小高度
IE6 不支持min-height屬性，但它卻認(rèn)為height就是最小高度。解決方法：

上一篇：CSS3旋轉(zhuǎn)——彩色扇子兼容firefox瀏覽器

下一篇：CSS3+font字體文件實(shí)現(xiàn)圓形半透明菜單具體步驟(圖解)