safari和chrome游览器显示都正常，但firefox却排版出错
来源：3-2 项目作业
鲨鱼会飞
2019-08-22 21:18:17
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3-2homework</title> <link rel="stylesheet" type="text/css" href="css3-2.css"> </head> <body> <table> <!--页面头部--> <thead> <tr class="header" > <td> <img src="images03/img/logo.png" ></td> </tr> </thead> <!--页面中间部分--> <tbody> <tr class="main"> <td> <!--页面中间一行一列中嵌套一个table--> <table class="maintable"> <!--table分为一行两列--> <td class="left-td"> <dl> </br> </br> <dd>商品管理</dd> </br> <dd>评价管理</dd> </br> <dd>咨询管理</dd> </br> </br> </br> <dd><strong>全部订单</strong></dd> </br> <dd>已完成订单</dd> </br> <dd>待处理订单</dd> </br> <dd>今日物流</dd> </br> </br> </br> <dd>月考核</dd> </br> <dd>季度考核</dd> </br> <dd>年度考核</dd> </dl><!--左列--> </td> <td class="right-td"><!--右列--> <!--嵌套三个表格--> <table class="rtable-1"><!--表格1--> <tr class="tr1"> <td> 全部订单 </td> </tr> </table> <table class="rtable-2"><!--表格2--> <tr class="tr2"> <td> 查询：<input type="date"> 至 <input type="date"> </td> </tr> </table> <table class="rtable-3" ><!--表格3--> <!--表格3中分为13行--> <tr class="tr3-1"> <td colspan="2">宝贝信息</td> <td>订单数量</td> <td>单价</td> <td>买家</td> <td>下单时间</td> <td>实付款</td> <td>订单操作</td> </tr> <tr class="tr3-2"> <td><img src="images03/img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-2-21 21:54</td> <td>240</td> <td>待付款</td> </tr> <tr class="tr3-3"> <td><img src="images03/img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td> <td>2</td> <td>120</td> <td>小李子</td> <td>2019-2-21 19:04</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-4"> <td><img src="images03/img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小红</td> <td>2019-2-21 16:54</td> <td>240</td> <td>待发货</td> </tr> <tr class="tr3-5"> <td><img src="images03/img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td> <td>2</td> <td>120</td> <td>可乐</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-6"> <td><img src="images03/img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>魏明</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-7"> <td><img src="images03/img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td> <td>2</td> <td>120</td> <td>李晓雨</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-8"> <td><img src="images03/img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>艳艳</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-9"> <td><img src="images03/img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行运动鞋<</td> <td>2</td> <td>120</td> <td>片片</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-10"> <td><img src="images03/img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小兰</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-11"> <td><img src="images03/img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td> <td>2</td> <td>120</td> <td>魏璎珞</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-12"> <td><img src="images03/img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小慕</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> <tr class="tr3-13"> <td><img src="images03/img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小苏</td> <td>2019-2-21 14:30</td> <td>240</td> <td>未发货</td> </tr> </table> </td> </table> </td> </tr> </tbody> <!--页面底部--> <tfoot> <tr class="footer" > <td> <p>2019-9-21 ©right;imooc.com</p> </td> </tr> </tfoot> </table> </body> </html>
/*全局设置*/
*{padding:0;margin:0;}
table{width:100%;border-spacing:0;}
/*顶部*/
thead{width:100%;background-color:#0099cc;height:80px;}
.header{width:100%;height:80px;}
/*页面中部*/
body table tbody{height:814px;}
tbody .main{width:100%;height:810px;}
.maintable{border:2px solid gray;border-spacing:0;}
/*页面中部左侧*/
.left-td{width:12%;height:810px;float:left;}
/*页面中部右侧*/
.right-td{width:88%;height:810px;float:right;}
.rtable-1,.rtable-2{width:100%;height:50px;border:2px solid gray;}
.rtable-2 .tr2 input{height:25px;}
/*页面中部13行表格*/
.rtable-3{width:100%;height:712px;border:1px solid gray;border-spacing:0;}
.rtable-3 > tbody > .tr3-1{height:50px;border:1px solid gray;}
.rtable-3 > tbody > tr{height:54px;}
.rtable-3 tr img{width:45px;height:45px;}
.rtable-3 td{text-align: center;border:1px solid gray;}
/*页面底部*/
tfoot{width:100%;height:80px;background-color: #0099cc;}
.footer{height:80px;}
.footer p{text-align:center;line-height:80px;}这是什么原因呢 遇到这种兼容问题该怎么办呀。谢谢
写回答
1回答
-
你好同学，很多兼容性问题，都是样式写的有问题。遇到此类的，可以在有问题的浏览器中进行排查，逐个解决。老师教你如何解决问题，如下：
在火狐中，单元格高度非常大，那么就按F12查看一下样式，发现是给tbody设置高度就很大
把它去掉就正常了
但是不去掉的话，在其他浏览器，例如谷歌也是正常显示的。这样就能总结到，tbody设置高度，在火狐浏览器中可以生效，在谷歌（或者其他浏览器）不生效。
祝学习愉快，望采纳。
0
相似问题