HTML Table局部布局与浏览器兼容性

1、技术目标:
  • 掌握使用table tr td局部布局的情况
  • 处理浏览器兼容性问题


2、Table局部布局应用场景1

    2.1)
应用场景1(产品列表页面),如图:

   

   
    2.2)布局分析:类似产品列表页面这种多行多列的数据展示方式,
    一般使用表格布局来处理,HTML结构代码如下:
   

  1. <body>  
  2.     <div id="container">  
  3.      <table id="main">  
  4.         <tr class="title">  
  5.           <td class="td_1"><input type="checkbox" value="全选"  /> 全选</td>  
  6.           <td class="td_2">商品图片</td>  
  7.           <td class="td_3">商品名称/出售者/联系方式</td>  
  8.           <td class="td_4">价格</td>  
  9.         </tr>  
  10.         <tr class="a_c">  
  11.           <td><input type="checkbox" value="1" name="auction_id" /></td>  
  12.           <td><a href="#" title="商品详细情况"><img src="images/list0.jpg" alt="alt" /></a></td>  
  13.           <td><a  href="#">杜比环绕,家庭影院必备,超真实享受</a><br />  
  14.               出售者:<a href="#">ling112233</a> <br />  
  15.               <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  16.               <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>     
  17.           </td>  
  18.           <td>一口价<br /> 2833.0</td>  
  19.         </tr>  
  20.         <tr class="a_c">  
  21.           <td><input type="checkbox" value="2" name="auction_id" /></td>  
  22.           <td><a href="#" title="商品详细情况">  
  23.                          <img src="images/list1.jpg" alt="alt" /></a></td>  
  24.           <td><a  href="#">NVDIA 9999GT 512MB 256bit极品显卡,不容错过</a>  
  25.               <br />出售者:<a href="#">aipiaopiao110</a>  
  26.               <br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  27.           <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>  
  28.               </td>  
  29.           <td>一口价<br />2460.0</td>  
  30.         </tr>  
  31.         <tr class="a_c">  
  32.           <td><input type="checkbox" value="3" name="auction_id" /></td>  
  33.           <td><a href="#" title="商品详细情况">  
  34.                 <img src="images/list2.jpg" alt="alt" /></a></td>  
  35.           <td><a  href="#">精品热卖:高清晰,30寸等离子电视</a>  
  36.              <br />出售者:<a href="#">阳光的挣扎</a>  
  37.              <br /> <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  38.             <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>  
  39.              </td>  
  40.           <td>一口价<br />18880</td>  
  41.         </tr>  
  42.          
  43.         <tr class="a_c">  
  44.           <td><input type="checkbox" value="4" name="auction_id" /></td>  
  45.           <td> <a href="#" title="商品详细情况">  
  46.               <img src="images/list3.jpg" alt="alt" /></a>  
  47.             </td>  
  48.           <td ><a  href="#">Sony索尼家用最新款笔记本 </a>  
  49.                <br />出售者:<a href="#">疯狂的镜无</a>  
  50.                <br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  51.               <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>  
  52.                </td>  
  53.           <td>一口价<br />5889.0</td>  
  54.         </tr>  
  55.       </table>  
  56.     </div>  
  57.     </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结构代码如下:

  1. <body>  
  2.     <div id="container">  
  3.     <form action="" method="post">  
  4.     <table id="register">  
  5.      <tr>  
  6.         <td class="register_left">名字:</td>  
  7.         <td><input id="realname" type="text"  class="reg_text"/></td>  
  8.         <td rowspan="12" class="register_right">  
  9.             <h4><img src="images/read.gif" alt="alt" />阅读贵美网服务协议 </h4>  
  10.             <textarea cols="30" rows="15" name="agreement">欢迎阅读服务条款协议,本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。  
  11.           本服务协议双方为本站与本站用户,本服务协议具有合同效力。  
  12.           本站的权利和义务:  
  13.             ......  
  14.       </textarea></td>  
  15.       </tr>  
  16.       <tr>  
  17.         <td class="register_left">姓氏:</td>  
  18.         <td><input id="xing" type="text"  class="reg_text"/></td>  
  19.       </tr>  
  20.       <tr>  
  21.         <td class="register_left">登录名:</td>  
  22.         <td><input id="username" type="text"  class="reg_text"/>(可包含 a-z、0-9 和下划线) </td>  
  23.       </tr>  
  24.       <tr>  
  25.         <td class="register_left">密码:</td>  
  26.         <td><input id="pwd" type="text"  class="reg_text"/>(至少包含 6 个字符)</td>  
  27.       </tr>  
  28.       <tr>  
  29.         <td class="register_left">再次输入密码:</td>  
  30.         <td><input id="repwd" type="text"  class="reg_text"/></td>  
  31.       </tr>  
  32.       <tr>  
  33.         <td class="register_left">电子邮箱:</td>  
  34.         <td><input id="email" type="text"  class="reg_text"/>(必须包含 @ 字符) </td>  
  35.       </tr>  
  36.       <tr>  
  37.         <td class="register_left">性别:</td>  
  38.         <td><input name="sex" type="radio" id="male"/><label for="male"></label>  
  39.             <input name="sex" type="radio" id="female"/><label for="female"></label></td>  
  40.       </tr>  
  41.       <tr>  
  42.         <td class="register_left">头像:</td>  
  43.         <td> <input type="file" /></td>  
  44.       </tr>  
  45.       <tr>  
  46.         <td class="register_left">爱好:</td>  
  47.         <td><input name="hobby" type="checkbox" id="run"/><label for="run">运动</label>  
  48.            <input name="hobby" type="checkbox" id="chat"/><label for="chat">聊天</label>     
  49.            <input name="hobby" type="checkbox" id="play"/><label for="play">玩游戏</label> </td>  
  50.       </tr>  
  51.       <tr>  
  52.         <td class="register_left">出生日期:</td>  
  53.         <td><input class="reg_small" id="nYear" value="yyyy" />  
  54.         &nbsp;年&nbsp;  
  55.                    <select id="nMonth" name="nMonth">  
  56.                      <option value="" selected="selected">[选择月份]</option>  
  57.                      <option value="0">一月</option>  
  58.                      <option value="1">二月</option>  
  59.                      <option value="2">三月</option>  
  60.                      <option value="3">四月</option>  
  61.                      <option value="4">五月</option>  
  62.                      <option value="5">六月</option>  
  63.                      <option value="6">七月</option>  
  64.                      <option value="7">八月</option>  
  65.                      <option value="8">九月</option>  
  66.                      <option value="9">十月</option>  
  67.                      <option value="10">十一月</option>  
  68.                      <option value="11">十二月</option>  
  69.                   </select>&nbsp;月&nbsp;  
  70.                   <input id="nDay" class="reg_small" value="dd"/>日  
  71.             </td>  
  72.       </tr>  
  73.       <tr>  
  74.         <td>&nbsp;</td>  
  75.         <td><input type="submit" class="submit" value=" " />  
  76.            <input type="reset" value=" " class="reset" />  
  77.            </td>  
  78.       </tr>  
  79.       <tr>  
  80.         <td>&nbsp;</td>  
  81.         <td>&nbsp;</td>  
  82.       </tr>  
  83.     </table></form></div>  
  84.     </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布局及样式
  • 浏览器兼容性怎样测试?
  • 如何解决浏览器兼容性问题?


转载:http://blog.csdn.net/mercop/article/details/7882006

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值