[url=http://www.leutao.com/][img]http://www.leutao.com/templates/default/style/logo.png[/img][/url]
1、超鏈接訪問過後hover樣式就不出現的問題
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
a:link {
color:red;
}
a:hover {
color:blue;
}
a:visited {
color:green;
}
a:active {
colorrange;
}
</style>
</head>
<body>
<a href="#" mce_href="#">
web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全
</a>
</body>
</html>
解決方案：被點擊訪問過的超鏈接樣式不在具有hover和active了，很多人應該都遇到過這個問題，解決方法是改變CSS屬性的排列順序：L-V-H-A
2、IE6的雙倍邊距BUG
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
body {
margin:0
}
div {
float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>
<a href="#" mce_href="#">web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全</a>
</div>
</body>
</html>
解決方案：浮動後本來外邊距10px，但IE解釋爲20px，解決辦法是加上display:inline
3、FF下爲什麼父容器的高度不能自適應
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
border:1px solid red
}
p {
float:left;
width:100px;
}
</style>
</head>
<body>
<div><p>web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全</p></div>
</body>
</html>
解決方案一：爲什麼這個P撐不開DIV呢？解決的辦法是在div與p之間插入<div style="clear:both"></div>清除掉這個p的浮動
解決方案二：不用插入<div style="clear:both"></div>，只要去掉P的浮動屬性，把float:left;去掉即可
4、IE下爲什麼圖片下方有空隙產生
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
border:1px solid red;
backgroundrange;
}
img {
width:276px;
height:110px;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" />
</div>
</body>
</html>
解決方案：這個IE的3PX BUG也是經常出現的，解決的辦法是給.right也同樣浮動float:left或者相對IE6定義.left margin-right:-3px;
5、web標準中定義id與class有什麼區別嗎
解決方案：
一、web標準中是不容許重複ID的，比如div id="aa"一個頁面中不容許重複2次，而class定義的是類，理論上可以無限重複的，這樣需要多次引用的定義便可以使用他.class還可以同時引用多個類，不同的類之間用空格隔開
二、屬性的優先級問題，ID的優先級要高於class，看上面的例子
三、方便JS等客戶端腳本，如果在頁面中要對某個對象進行腳本操作，那麼可以給他定義一個ID，否則只能利用遍歷頁面元素加上指定特定屬性來找到它，這是相對浪費時間資源，遠遠不如一個ID來得簡單
6、如何垂直居中文本
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
height:30px;
line-height:30px;
border:1px solid red
}
</style>
</head>
<body>
<div>web標準常見問題大全</div>
</body>
</html>
解決方案：給容器設置一個與其高度相同的行高就可以了
7、如何對齊文本與文本輸入框
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
input {
width:200px;
height:30px;
border:1px solid red;
}
</style>
</head>
<body>
<input type="text" />aaaaaaaaaaaaaaaaaa
</body>
</html>
解決方案：遇到此種問題，設置文本框的vertical-align:middle就可以了
8、爲什麼FF下文本無法撐開容器的高度
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見</div>
</body>
</html>
解決方案：標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的，那我又想固定高度，又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px;，這裏爲了照顧不認識min-height的IE6可以這樣定義：
{
height:auto!important;
height:200px;
min-height:200px;
}
9、爲什麼無法定義1px左右高度的容器
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
background:red;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
解決方案：IE6下這個問題是因爲默認的行高造成的，解決的方法也有很多，例如overflow:hidden|zoom:0.08|line-height:1px
overflow:hidden：這個方法對所有的瀏覽器都沒用
zoom:0.08：這個方法對FF沒用
line-height:1px：這個方法對所有瀏覽器都有用
10、怎麼樣才能讓層顯示在FLASH之上呢
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:200px;
background:red
}
object {
width:500px;
height:100px;
}
</style>
</head>
<body>
<div>web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全</div>
<object type="application/x-shockwave-flash" data="http://gg.blueidea.com/2005/www/m533-104.swf">
<param name="movie" value="http://gg.blueidea.com/2005/www/m533-104.swf" />
</object>
</body>
</html>
解決方案：解決的辦法是給FLASH設置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
1、超鏈接訪問過後hover樣式就不出現的問題
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
a:link {
color:red;
}
a:hover {
color:blue;
}
a:visited {
color:green;
}
a:active {
colorrange;
}
</style>
</head>
<body>
<a href="#" mce_href="#">
web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全
</a>
</body>
</html>
解決方案：被點擊訪問過的超鏈接樣式不在具有hover和active了，很多人應該都遇到過這個問題，解決方法是改變CSS屬性的排列順序：L-V-H-A
2、IE6的雙倍邊距BUG
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
body {
margin:0
}
div {
float:left;
margin-left:10px;
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>
<a href="#" mce_href="#">web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全</a>
</div>
</body>
</html>
解決方案：浮動後本來外邊距10px，但IE解釋爲20px，解決辦法是加上display:inline
3、FF下爲什麼父容器的高度不能自適應
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
border:1px solid red
}
p {
float:left;
width:100px;
}
</style>
</head>
<body>
<div><p>web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全</p></div>
</body>
</html>
解決方案一：爲什麼這個P撐不開DIV呢？解決的辦法是在div與p之間插入<div style="clear:both"></div>清除掉這個p的浮動
解決方案二：不用插入<div style="clear:both"></div>，只要去掉P的浮動屬性，把float:left;去掉即可
4、IE下爲什麼圖片下方有空隙產生
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
border:1px solid red;
backgroundrange;
}
img {
width:276px;
height:110px;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" />
</div>
</body>
</html>
解決方案：這個IE的3PX BUG也是經常出現的，解決的辦法是給.right也同樣浮動float:left或者相對IE6定義.left margin-right:-3px;
5、web標準中定義id與class有什麼區別嗎
解決方案：
一、web標準中是不容許重複ID的，比如div id="aa"一個頁面中不容許重複2次，而class定義的是類，理論上可以無限重複的，這樣需要多次引用的定義便可以使用他.class還可以同時引用多個類，不同的類之間用空格隔開
二、屬性的優先級問題，ID的優先級要高於class，看上面的例子
三、方便JS等客戶端腳本，如果在頁面中要對某個對象進行腳本操作，那麼可以給他定義一個ID，否則只能利用遍歷頁面元素加上指定特定屬性來找到它，這是相對浪費時間資源，遠遠不如一個ID來得簡單
6、如何垂直居中文本
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
height:30px;
line-height:30px;
border:1px solid red
}
</style>
</head>
<body>
<div>web標準常見問題大全</div>
</body>
</html>
解決方案：給容器設置一個與其高度相同的行高就可以了
7、如何對齊文本與文本輸入框
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
input {
width:200px;
height:30px;
border:1px solid red;
}
</style>
</head>
<body>
<input type="text" />aaaaaaaaaaaaaaaaaa
</body>
</html>
解決方案：遇到此種問題，設置文本框的vertical-align:middle就可以了
8、爲什麼FF下文本無法撐開容器的高度
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
width:200px;
height:200px;
border:1px solid red
}
</style>
</head>
<body>
<div>web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見</div>
</body>
</html>
解決方案：標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的，那我又想固定高度，又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px;，這裏爲了照顧不認識min-height的IE6可以這樣定義：
{
height:auto!important;
height:200px;
min-height:200px;
}
9、爲什麼無法定義1px左右高度的容器
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
background:red;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
解決方案：IE6下這個問題是因爲默認的行高造成的，解決的方法也有很多，例如overflow:hidden|zoom:0.08|line-height:1px
overflow:hidden：這個方法對所有的瀏覽器都沒用
zoom:0.08：這個方法對FF沒用
line-height:1px：這個方法對所有瀏覽器都有用
10、怎麼樣才能讓層顯示在FLASH之上呢
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:200px;
background:red
}
object {
width:500px;
height:100px;
}
</style>
</head>
<body>
<div>web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全web標準常見問題大全</div>
<object type="application/x-shockwave-flash" data="http://gg.blueidea.com/2005/www/m533-104.swf">
<param name="movie" value="http://gg.blueidea.com/2005/www/m533-104.swf" />
</object>
</body>
</html>
解決方案：解決的辦法是給FLASH設置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
