HTML Table局部布局与浏览器兼容性 标签:
浏览器htmltableclassfirefoxie2012-08-19 00:18 10583人阅读 (0)
分类:
HTML&JS(3)
HTML Table局部布局与浏览器兼容性
注意:案例中所涉及的图片素材,页面下方提供下载
1、技术目标:
掌握使用table tr td局部布局的情况
处理浏览器兼容性问题
2、Table局部布局应用场景1
2.1)应用场景1(产品列表页面),如图:
2.2)布局分析:类似产品列表页面这种多行多列的数据展示方式,
一般使用表格布局来处理,HTML结构代码如下:
Html代码
<body>
<div id="container">
<tableid="main">
<trclass="title">
<tdclass="td_1"><inputtype="checkbox"value="全选" /> 全选</td>
<tdclass="td_2">商品图片</td>
<tdclass="td_3">商品名称/出售者/联系方式</td>
<tdclass="td_4">价格</td>
</tr>
<trclass="a_c">
<td><inputtype="checkbox"value="1"name="auction_id"/></td>
<td><ahref="#"title="商品详细情况"><imgsrc="images/list0.jpg"alt="alt"/></a></td>
<td><a href="#">杜比环绕,家庭影院必备,超真实享受</a><br/>
出售者:<ahref="#">ling112233</a><br />
<ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a>
<ahref="#"><imgsrc="images/list_tool_fav1.gif"alt="alt"/> 收藏</a>
</td>
<td>一口价<br/> 2833.0</td>
</tr>
<trclass="a_c">
<td><inputtype="checkbox"value="2"name="auction_id"/></td>
<td><ahref="#"title="商品详细情况">
<imgsrc="images/list1.jpg"alt="alt"/></a></td>
<td><a href="#">NVDIA 9999GT 512MB 256bit极品显卡,不容错过</a>
<br/>出售者:<ahref="#">aipiaopiao110</a>
<br/><ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a>
<ahref="#"><imgsrc="images/list_tool_fav1.gif"alt="alt"/> 收藏</a>
</td>
<td>一口价<br/>2460.0</td>
</tr>
<trclass="a_c">
<td><inputtype="checkbox"value="3"name="auction_id"/></td>
<td><ahref="#"title="商品详细情况">
<imgsrc="images/list2.jpg"alt="alt"/></a></td>
<td><a href="#">精品热卖:高清晰,30寸等离子电视</a>
<br/>出售者:<ahref="#">阳光的挣扎</a>
<br/> <ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a>
<ahref="#"><imgsrc="images/list_tool_fav1.gif"alt="alt"/> 收藏</a>
</td>
<td>一口价<br/>18880</td>
</tr>
<trclass="a_c">
<td><inputtype="checkbox"value="4"name="auction_id"/></td>
<td><a href="#"title="商品详细情况">
<imgsrc="images/list3.jpg"alt="alt"/></a>
</td>
<td><a href="#">Sony索尼家用最新款笔记本</a>
<br/>出售者:<ahref="#">疯狂的镜无</a>
<br/><ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a>
<ahref="#"><imgsrc="images/list_tool_fav1.gif"alt="alt"/> 收藏</a>
</td>
<td>一口价<br/>5889.0</td>
</tr>
</table>
</div>
</body>
[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结构代码如下:
Html代码
<body>
<div id="container">
<form action=""method="post">
<tableid="register">
<tr>
<tdclass="register_left">名字:</td>
<td><inputid="realname"type="text" class="reg_text"/></td>
<tdrowspan="12"class="register_right">
<h4><imgsrc="images/read.gif"alt="alt"/>阅读贵美网服务协议 </h4>
<textareacols="30"rows="15"name="agreement">欢迎阅读服务条款协议,本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。
本服务协议双方为本站与本站用户,本服务协议具有合同效力。
本站的权利和义务:
......
</textarea></td>
</tr>
<tr>
<tdclass="register_left">姓氏:</td>
<td><inputid="xing"type="text" class="reg_text"/></td>
</tr>
<tr>
<tdclass="register_left">登录名:</td>
<td><inputid="username"type="text" class="reg_text"/>(可包含 a-z、0-9 和下划线)</td>
</tr>
<tr>
<tdclass="register_left">密码:</td>
<td><inputid="pwd"type="text" class="reg_text"/>(至少包含 6 个字符)</td>
</tr>
<tr>
<tdclass="register_left">再次输入密码:</td>
<td><inputid="repwd"type="text" class="reg_text"/></td>
</tr>
<tr>
<tdclass="register_left">电子邮箱:</td>
<td><inputid="email"type="text" class="reg_text"/>(必须包含 @ 字符)</td>
</tr>
<tr>
<tdclass="register_left">性别:</td>
<td><inputname="sex"type="radio"id="male"/><labelfor="male">男</label>
<inputname="sex"type="radio"id="female"/><labelfor="female">女</label></td>
</tr>
<tr>
<tdclass="register_left">头像:</td>
<td><input type="file"/></td>
</tr>
<tr>
<tdclass="register_left">爱好:</td>
<td><inputname="hobby"type="checkbox"id="run"/><labelfor="run">运动</label>
<inputname="hobby"type="checkbox"id="chat"/><labelfor="chat">聊天</label>
<inputname="hobby"type="checkbox"id="play"/><labelfor="play">玩游戏</label></td>
</tr>
<tr>
<tdclass="register_left">出生日期:</td>
<td><inputclass="reg_small"id="nYear"value="yyyy"/>
年
<selectid="nMonth"name="nMonth">
<optionvalue=""selected="selected">[选择月份]</option>
<optionvalue="0">一月</option>
<optionvalue="1">二月</option>
<optionvalue="2">三月</option>
<optionvalue="3">四月</option>
<optionvalue="4">五月</option>
<optionvalue="5">六月</option>
<optionvalue="6">七月</option>
<optionvalue="7">八月</option>
<optionvalue="8">九月</option>
<optionvalue="9">十月</option>
<optionvalue="10">十一月</option>
<optionvalue="11">十二月</option>
</select> 月
<inputid="nDay"class="reg_small"value="dd"/>日
</td>
</tr>
<tr>
<td> </td>
<td><inputtype="submit"class="submit"value=" "/>
<inputtype="reset"value=" "class="reset"/>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></form></div>
</body>
[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
\0Firefox与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布局及样式
浏览器兼容性怎样测试?
如何解决浏览器兼容性问题?
顶
1
踩
0
上一篇
HTML CSS + DIV实现局部布局下一篇
dataSet用法相关文章推荐
·
HTML 第八章 Table局部布局与浏览器兼容性·
DIV+CSS布局设计时IE6、IE7、FF 与兼容性有关的特性·
CSS 针对各个浏览器的兼容性-终结总结篇·
HTML Table局部布局与浏览器兼容性·
DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容·
DIV+CSS 浏览器兼容性小结·
DIV+CSS所有浏览器兼容问题汇总·
前端开发面试题集锦·
HTML 第七章 CSS + DIV实现局部布局 ·
最全兼容性处理