HTML 第八章 Table局部佈局與瀏覽器兼容性
注意：案例中所涉及的圖片素材，頁面下方提供下載
1、技術目標:
- 掌握使用table tr td局部佈局的情況
- 處理瀏覽器兼容性問題
2、Table局部佈局應用場景1
2.1）
應用場景1(產品列表頁面)，如圖：
2.2）
佈局分析：類似產品列表頁面這種多行多列的數據展示方式，
一般使用表格佈局來處理，HTML結構代碼
如下：
<body>
<div id="container">
<table id="main">
<tr class="title">
<td class="td_1"><input type="checkbox" value="全選" /> 全選</td>
<td class="td_2">商品圖片</td>
<td class="td_3">商品名稱/出售者/聯繫方式</td>
<td class="td_4">價格</td>
</tr>
<tr class="a_c">
<td><input type="checkbox" value="1" name="auction_id" /></td>
<td><a href="#" title="商品詳細情況"><img src="images/list0.jpg" alt="alt" /></a></td>
<td><a href="#">杜比環繞，家庭影院必備，超真實享受</a><br />
出售者：<a href="#">ling112233</a> <br />
<a href="#"><img src="images/online_pic.gif" alt="alt" /></a>
<a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>
</td>
<td>一口價<br /> 2833.0</td>
</tr>
<tr class="a_c">
<td><input type="checkbox" value="2" name="auction_id" /></td>
<td><a href="#" title="商品詳細情況">
<img src="images/list1.jpg" alt="alt" /></a></td>
<td><a href="#">NVDIA 9999GT 512MB 256bit極品顯卡，不容錯過</a>
<br />出售者：<a href="#">aipiaopiao110</a>
<br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a>
<a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>
</td>
<td>一口價<br />2460.0</td>
</tr>
<tr class="a_c">
<td><input type="checkbox" value="3" name="auction_id" /></td>
<td><a href="#" title="商品詳細情況">
<img src="images/list2.jpg" alt="alt" /></a></td>
<td><a href="#">精品熱賣：高清晰，30寸等離子電視</a>
<br />出售者：<a href="#">陽光的掙扎</a>
<br /> <a href="#"><img src="images/online_pic.gif" alt="alt" /></a>
<a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>
</td>
<td>一口價<br />18880</td>
</tr>
<tr class="a_c">
<td><input type="checkbox" value="4" name="auction_id" /></td>
<td> <a href="#" title="商品詳細情況">
<img src="images/list3.jpg" alt="alt" /></a>
</td>
<td ><a href="#">Sony索尼家用最新款筆記本 </a>
<br />出售者：<a href="#">瘋狂的鏡無</a>
<br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a>
<a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>
</td>
<td>一口價<br />5889.0</td>
</tr>
</table>
</div>
</body>
CSS樣式代碼如下：
#container{
width:980px;
margin:0px auto;/*整體內容居中顯示*/
}
/*商品列表頁樣式開始*/
#main{
width:100%;
margin:0px auto;
border:0px;
padding-top:34px;
background:url(images/list_bg.gif) no-repeat;
}
.td_1{width:10%;}
.td_2{width:20%;}
.td_3{width:50%;}
.td_4{width:20%;}
.a_c td, .title td{
text-align:center;
line-height:30px;
/*每行的底部灰色虛線*/
border-bottom:1px #CCCCCC dashed;
padding:10px 0px;
}
.title td{
font-weight:bold;
}
.a_c td{
line-height:30px;
}
/*商品列表頁樣式開始*/
3、Table局部佈局應用場景2
3.1）
應用場景2(註冊頁面)，如圖：
3.2）
在表單元素密集的頁面，一般使用Table對錶單控件進行排列，
HTML結構代碼如下：
<body>
<div id="container">
<form action="" method="post">
<table id="register">
<tr>
<td class="register_left">名字：</td>
<td><input id="realname" type="text" class="reg_text"/></td>
<td rowspan="12" class="register_right">
<h4><img src="images/read.gif" alt="alt" />閱讀貴美網服務協議 </h4>
<textarea cols="30" rows="15" name="agreement">歡迎閱讀服務條款協議，本協議闡述之條款和條件適用於您使用Gmgw.com網站的各種工具和服務。
本服務協議雙方爲本站與本站用戶，本服務協議具有合同效力。
本站的權利和義務：
......
</textarea></td>
</tr>
<tr>
<td class="register_left">姓氏：</td>
<td><input id="xing" type="text" class="reg_text"/></td>
</tr>
<tr>
<td class="register_left">登錄名：</td>
<td><input id="username" type="text" class="reg_text"/>（可包含 a-z、0-9 和下劃線） </td>
</tr>
<tr>
<td class="register_left">密碼：</td>
<td><input id="pwd" type="text" class="reg_text"/>（至少包含 6 個字符）</td>
</tr>
<tr>
<td class="register_left">再次輸入密碼：</td>
<td><input id="repwd" type="text" class="reg_text"/></td>
</tr>
<tr>
<td class="register_left">電子郵箱：</td>
<td><input id="email" type="text" class="reg_text"/>（必須包含 @ 字符） </td>
</tr>
<tr>
<td class="register_left">性別：</td>
<td><input name="sex" type="radio" id="male"/><label for="male">男</label>
<input name="sex" type="radio" id="female"/><label for="female">女</label></td>
</tr>
<tr>
<td class="register_left">頭像：</td>
<td> <input type="file" /></td>
</tr>
<tr>
<td class="register_left">愛好：</td>
<td><input name="hobby" type="checkbox" id="run"/><label for="run">運動</label>
<input name="hobby" type="checkbox" id="chat"/><label for="chat">聊天</label>
<input name="hobby" type="checkbox" id="play"/><label for="play">玩遊戲</label> </td>
</tr>
<tr>
<td class="register_left">出生日期：</td>
<td><input class="reg_small" id="nYear" value="yyyy" />
年
<select id="nMonth" name="nMonth">
<option value="" selected="selected">[選擇月份]</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
<option value="4">五月</option>
<option value="5">六月</option>
<option value="6">七月</option>
<option value="7">八月</option>
<option value="8">九月</option>
<option value="9">十月</option>
<option value="10">十一月</option>
<option value="11">十二月</option>
</select> 月
<input id="nDay" class="reg_small" value="dd"/>日
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" class="submit" value=" " />
<input type="reset" value=" " class="reset" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></form></div>
</body>
CSS樣式代碼如下：
#container{
width:980px;/*整體內容居中顯示*/
margin:0px auto;
}
/*註冊頁面開始*/
#register{
width:100%;
margin:0px auto;
border:0px;
padding-top:60px;
background:url(images/reg_bg.gif) no-repeat;
}
#register td{
line-height:30px;
}
.register_left{
width:150px;
text-align:right;
}
.register_right{
width:300px;
text-align:left;
vertical-align:top;
}
.reg_text,.reg_small{
height:16px;
border:#333 1px solid;
}
.reg_text{
width:130px;
}
.reg_small{
width:30px;
}
#register .submit,#register .reset{
background-repeat:no-repeat;
width:80px;
height:34px;
border:0;
background-color:transparent; /*背景透明*/
}
#register .submit{
background-image:url(images/submit.gif);
}
#register .reset{
background-image:url(images/reset.gif);
}
/*註冊頁面結束*/
4、爲什麼需要考慮瀏覽器兼容性？
- 不同瀏覽器廠商對個別CSS含義解析不同，造成同一頁面在不同瀏覽器中顯示效果不同
- 瀏覽器廠商沒完全支持W3C標準
- IE是國內的主流瀏覽器，必須考慮IE6.0~IE8.0兼容
- IE存在的兼容性問題較多，特別是IE6.0
5、頁面的兼容性測試
兼容性測試包括檢查瀏覽器之間的兼容性
以及驗證代碼是否符合W3C的標準
5.1）
檢查瀏覽器之間的兼容性
測試網頁在各種瀏覽器產品及各種版本中顯示效果是否一致，一般要求保證
IE和Firefox兼容。IE要求IE6.0到IE8.0兼容即可，所以開發者需要安裝IE
的多個版本以及Firefox瀏覽器，IE多版本測試可使用IETester工具
，安裝
好IE8，打開IETest就可以測試IE5.5~IE8.0各版本的效果
注意：IETest自行下載使用
5.2）
驗證代碼是否符合W3C的相關標準，可使用以下方法
- 使用Dreamveaver進行檢查(文件->驗證->標記)
- 使用Firefox的firebug插件進行檢測(頁面下方提供下載)
- 使用W3C官網提供的檢測：validator.w3.org
6、如何解決瀏覽器兼容問題？
6.1）
代碼編寫需要注意以下問題
- 網頁的HTML結構儘量語義化
- 儘量使用典型的四種局部結構
- 層次結構儘量簡潔，儘量減少冗餘標籤
6.2）
根據瀏覽器的不同版本，編寫相應的CSS代碼
注意：
- 不同瀏覽器識別不同的CSS特殊符號
- 如瀏覽器識別多個特殊符號，則控制CSS順序
|
瀏覽器 |
特殊字符 | 書寫風格順序 |
| Firefox | !important | 最先， 設定樣式優先級，firefox能識別 |
|
IE8 |
\0 | Firefox與IE6中間，font屬性的縮寫不能用 |
| IE7 | + | 中間（此符號IE6也能識別，因此寫中間，常用於IE7 hack） |
| IE6 |
_ |
最後 |
6.3）
瀏覽器兼容CSS hack示例
示例1，IE與firefox的樣式識別：
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.divClass
{
/*
該樣式IE無法識別，而firefox可以識別，
firefox識別其優先級比第2個border樣式高
*/
border: 14px solid red !important;
border: 14px solid blue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="divClass"></div>
</body>
</html>
示例2，各版本IE的樣式識別(請在不同版本的IE下運行)：
<!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>
<style type="text/css">
/*修改各瀏覽器默認預留的頁面內容邊距*/
body{
margin:5px;
padding:0px;
}
div{
font:bold 20px 宋體; /* Firefox */
font-size:12px\0; /* IE8在末尾用"\0" */
+font:normal 20px 黑體; /* IE7在開始用"+" */
_font:normal 16px 宋體; /* IE6在開始用"_" */
color:red;
color:green\0;
+color:purple;
_color:blue;
}
</style>
</head>
<body>
<div>不同瀏覽器效果。
<!--[if IE 8]>IE8<![endif]-->
<!--[if IE 7]>IE7<![endif]-->
<!--[if IE 6]>IE6<![endif]-->
</div>
</body>
</html>
7、常見兼容性問題1，三像素文本慢移問題
問題描述：
IE6.0中，浮動(float)元素與其後緊跟的一個行內元素之間
有3像素的間隙，稱爲"3像素文本慢移"問題，其他瀏覽器無此問題
示例代碼：
<!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>
<style type="text/css">
#left{
float:left;
width:100px;
height:30px;
background-color:#F00;
}
span{
_margin-left:-3px;/*修復IE6 3像素文本慢移問題*/
}
</style>
</head>
<body>
<div id="left"></div><span>三像素文本慢移</span>
</body>
</html>
8、常見兼容性問題2，雙倍邊距問題
問題描述：
IE6.0中，如果元素的浮動(float)方向與margin一致，如，
左浮動(float:left)元素設置左外邊距(margin-left:50px)，則外邊距
會加倍(顯示出100px的左外邊距)，稱爲"雙倍邊距"問題，其他瀏覽器
無此問題
示例代碼：
<!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>
<style type="text/css">
body{
font-size:13px;
margin:0px;
line-height:20px;
}
div{
float:left;
/*設置浮動元素爲內聯，可解決IE6雙倍邊距問題*/
display:inline;
width:150px;
height:60px;
margin:0px 0px 0px 50px;
background-color:#ccc;
}
</style>
</head>
<body>
<div>左邊界設爲50px，其他邊界均設爲0px，但在IE6下左邊界卻是100px</div>
</body>
</html>
9、總結：
- 產品列表頁面的Table佈局及樣式
- 註冊頁面的Table佈局及樣式
- 瀏覽器兼容性怎樣測試？
- 如何解決瀏覽器兼容性問題？