请问为什么用火狐浏览器显示顶部表格会断层,其他浏览器就不会?

来源:3-10 作业题

歌尔德蒙

2019-01-22 23:53:29

<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>慕课作业</title>    
</head>
<body>
   <table width="100%" rules="none">
       <thead>
           <!--顶部-->
           <tr bgcolor="#E1F2F9">
               <td hight="150px">
                   <img src="image/logo.png"/>
               </td>
               <td><h4>学校概况&nbsp;&nbsp;&nbsp;机构设置&nbsp;&nbsp;&nbsp;师资队伍&nbsp;&nbsp;&nbsp;科学研究&nbsp;&nbsp;&nbsp;招生就业&nbsp;&nbsp;&nbsp;图书馆&nbsp;&nbsp;&nbsp;校长信箱&nbsp;&nbsp;&nbsp;校园导航<h4></td>
               <td>
                   <form>快速通道
                       <select>
                           <option value="v">volvo</option>
                           <option value="v">volvo</option>
                           <option value="v">volvo</option>
                       </select>
                   </form>
               </td>
           </tr>
           <!--banner区-->
           <tr>
               <td colspan="3" width="100%" >
                   <img src="image/banner.jpg" width="100%" height="300px"/>
               </td>
           </tr>
       </thead>
       <tbody>
           <!--新闻区-->
           <tr>
               <td colspan="3">
                   <table width="80%">
                       <tr>
                           <td width=360px>
                               <h3>慕课快讯&nbsp;基层风采&nbsp;媒体聚焦&nbsp;慕课视频&nbsp;&gt;&gt;</h3>
                               <p>&lt;&nbsp;慕课平台课程扩容&nbsp;涵盖多个领域&nbsp;12-30</p>
                               <p>&lt;&nbsp;李克强主持座谈会&nbsp;葛优刘国梁被请进中南海&nbsp;12-30</p>
                               <p>&lt;&nbsp;台军演习&quot;歼灭&quot;&nbsp;专家:自欺欺人&nbsp;12-30</p>
                               <p>&lt;&nbsp;气象局停发霾预警?回应:正协商联合发布机制&nbsp;12-30</p>
                               <p>&lt;&nbsp;独家:小米影业解散宣发部门宣布成立一年后刹车&nbsp;12-30</p>
                               <p>&lt;&nbsp;“哑巴群众”开口说话是稿件有误还是新闻造假&nbsp;12-30</p>
                               <p>&lt;&nbsp;要职业,看看2017全球楼市掘金路线图&nbsp;12-30</p>
                               <p>&lt;&nbsp;王健林与房地产越来越远?贾跃亭与房地产越来越近&nbsp;12-30</p>
                           </td>
                           <td width=360px>
                               <h3>慕课快讯&nbsp;基层风采&nbsp;媒体聚焦&nbsp;慕课视频&nbsp;&gt;&gt;</h3>
                               <p>&lt;&nbsp;慕课平台课程扩容&nbsp;涵盖多个领域&nbsp;12-30</p>
                               <p>&lt;&nbsp;李克强主持座谈会&nbsp;葛优刘国梁被请进中南海&nbsp;12-30</p>
                               <p>&lt;&nbsp;台军演习&quot;歼灭&quot;&nbsp;专家:自欺欺人&nbsp;12-30</p>
                               <p>&lt;&nbsp;气象局停发霾预警?回应:正协商联合发布机制&nbsp;12-30</p>
                               <p>&lt;&nbsp;独家:小米影业解散宣发部门宣布成立一年后刹车&nbsp;12-30</p>
                               <p>&lt;&nbsp;“哑巴群众”开口说话是稿件有误还是新闻造假&nbsp;12-30</p>
                               <p>&lt;&nbsp;要职业,看看2017全球楼市掘金路线图&nbsp;12-30</p>
                               <p>&lt;&nbsp;王健林与房地产越来越远?贾跃亭与房地产越来越近&nbsp;12-30</p>
                           </td>
                           <td width=304>
                               <img src="image/weixin.png"/>
                           </td>
                       </tr>
                   </table>
               </td>
           </tr>
           <!--近期专题-->
           <tr>
               <td colspan="3">
                   <table width="80%">
                           <tr>
                               <td colspan="3" valign="bottom">近期专题</td>
                           </tr>
                           <tr>
                               <td>
                                   <br/>
                                   <img src="image/1.png"/>
                                   <p>教育发展基金专题</p>
                               </td>
                               <td>
                                   <br/>
                                   <img src="image/2.png"/>
                                   <p>教育发展基金专题</p>
                               </td>
                               <td>
                                   <br/>
                                   <img src="image/3.png"/>
                                   <p>教育发展基金专题</p>
                               </td>
                           </tr>
                   </table>
               </td>
           </tr>
       </tbody>
       <tfoot>
           <!--友情链接区-->
           <tr>
               <td colspan="3" valign="middle" bgcolor="#E1F2F9" height="60px">
               文化站点&nbsp;&nbsp;信息服务&nbsp;&nbsp;校友会&nbsp;&nbsp;OA系统&nbsp;&nbsp;教务管理系统&nbsp;&nbsp;网络教学平台&nbsp;&nbsp;vpn服务&nbsp;&nbsp;acm/oj&nbsp;&nbsp;旧版入口&nbsp;&nbsp;站群系统
               </td>
           </tr>
           <!--页脚区-->
           <tr>
               <td colspan="3" valign="middle" bgcolor="#89A9BD" height="60px"> Copyright&nbsp;&copy;&nbsp;2017&nbsp;imooc&nbsp;All&nbsp;Rights&nbsp;Resevrved&nbsp;|&nbsp;京ICP备&nbsp;13046642号-2</td>
           </tr>
       </tfoot>
   </table>
</body>
</html>

1.请问为什么用火狐浏览器显示顶部表格会断层,其他浏览器就不会?http://img.mukewang.com/climg/5c473bdf0001636a17740143.jpg火狐

http://img.mukewang.com/climg/5c473c0a000145ea17860115.jpg其他

2.老师能帮我看一下代码还有什么地方需要完善吗?

写回答

1回答

Steve007

2019-01-23

同学,你好。

第一个问题:用火狐浏览器表格会出现断层,是因为每个浏览器针对表格设置的默认样式都不同,火狐的浏览器对表格设置的就是这样的样式,可以对table的属性进行设置,让它不断层,设置如下:

http://img.mukewang.com/climg/5c47d0980001faed04880116.jpg

第二个问题:代码写的还是比较规范的,也有相应的注释,没有什么问题。

祝学习愉快!

1

0 学习 · 36712 问题

查看课程