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

2024-07-11 08:38:53

字體：大中小

供稿：網(wǎng)友

斷斷續(xù)續(xù)的在開發(fā)過程中收集了好多的bug以及其解決的辦法，都在這個文章里面記錄下來了！希望以后解決類似問題的時候能夠快速解決，也希望大家能在留言里面跟進自己發(fā)現(xiàn)的ie6 7 8bug和解決辦法！
1：li邊距“無故”增加
　　任何事情都是有原因的，li邊距也不例外。
　　先描述一下具體狀況：有些時候li邊距會突然增加很多，值也不固定（只在IE6/IE7有這種現(xiàn)象），讓人摸不著頭腦，仔細(xì)“研究”發(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>無標(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>分頁樣式</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>