Chrome浏览器在渲染html表格元素时出现的水平不对齐情况

Question

chrome浏览器渲染引擎在处理包含多个子元素的同一个<tb>标签时，子元素的对齐方式随网页缩放比例而会产生不一致。而这样的现象不会出现在Firefox、edge、IE11 和360安全浏览器上。

具体的语法细节如下，请留意到第一个<td>标签下放了两个子元素，一个是纯粹的字段“用户”，另一个则是<select></select>。

<div align="right">
<table height=62>
<tr><td width=130 style="font-size:9pt">
用户:
<select style="width:96px;height:24px" onchange="showdiv(this.form)" size="1" name="username">
<option value="阅览用户">阅览用户</option>

.....

<option value="中航物业" title="中航物业">143.中航物业</option>

</select>
</td>

<td width=130 style="font-size:9pt">
<div id="pwddiv" style="display:none">密码:<input name="userpwd" size="6" style="height:24px" value="********" type="password">
<input type="submit" value="登录" name="b1" style="height:24px" onclick="if(this.form.userpwd.value=='' && this.form.username.value!='阅览用户') {alert('请输入公文通登录密码\n\n或选择【阅览用户】免密码阅览');this.form.userpwd.focus();return false;}"></div>
<div id="nulldiv" style="display:block">　<input type="button" value="进入阅览" name="b1" style="height:24px" onclick="window.location.href='/board/guide.asp'"></div>
</td></tr></table>
</div>

chrome下不同网页缩放比例下渲染效果

发现问题的网址是 www1.szu.edu.cn

更具体的浏览器调试过程记录如下，如果嫌篇幅过长的可以直接跳过。

如下为本人向本校信息中心反馈此问题所撰写的细节详细的邮件原文。不过，貌似这个问题于他们而言实在是太无关紧要了，一直没有得到答复。于是就贴在这里，希望跟对类似这样的问题有过留意的技术网友交流一下。

---

------------------ 原始邮件 ------------------
发件人: "LeslieWong(QQ)"<[e-mail]>;
发送时间: 2019年3月4日(星期一) 晚上8:30
收件人: "深圳大学信息中心"<[e-mail]>;
主题: 深大内部网首页公文通入口样式变形问题？

信息中心：

   你好！
   自己在日常登录深大内部网的时候，发现自己chrome浏览器上的校园公文通入口栏里面
   的“用户”和“进入阅览”这两个字段总是不对齐。画面如下：

为此自己刚开始以为是内部网网页自身的缺陷，于是也在校务信箱里反馈了下，

然而，今天自己去南图的电子阅览室的上机的时候，却细心地发现那里的chrome浏览器，在进入内部网首页的时候，“进入阅览”字段和“用户“字段是对齐的。

对比两处显示的内部网首页，发觉区别除了在于校园公文通框里的字段是否对齐之外，两者的展示内容大小也不一样。我的电脑上进入内部网首页的时候是不能直接看到底部的“UOOC课程平台”和“深大OA移动版”的，而阅览室的电脑却可以。于是，自己便初步判断——或许是缩放大小导致的问题。
接着，便在自己电脑的chrome上测试了。

缩放100%的情况——字段不对齐：

缩放90%的情况——字段对齐：

缩放80%的情况——字段对齐：

缩放75%的情况——字段不对齐：

缩放67%的情况——字段对齐：

缩放50%的情况——字段不对齐，且底部浮动图标遮盖了联系方式

在放大方面，本人电脑上，当放大到150%的时候，出现字段不对齐情况，其他小于150%大于100%的chrome预设缩放比率都显示为字段对齐。

同样的情况也发生在阅览室的电脑上，在chrome浏览器中，有些缩放比例会导致字段不对齐，而有些则不会，不过相对应缩放比例与本人电脑上的有所不同。考虑到阅览室电脑和本人电脑的分辨率不同，因此相同缩放比率得到的分辨率也不会一样，为此， 推测本质原因应该是网页源代码中的媒体查询设置问题。

不过还是不能够妄下定论，得多做点调查，鉴于自己目前都是用的chrome浏览器做的测试，于是自己便决定接下来换个浏览器来测试——用firefox

结果是，在firefox中内部网首页不会出现字段不对齐的情况.
无论我的电脑还是阅览室电脑——

再试试EDGE浏览器，结果——
也一样，在edge中内部网首页不会出现字段不对齐的情况

另外，我电脑上还安装有360浏览器，也用它来试一试？
结果——在360浏览器中内部网首页不会出现字段不对齐的情况

字段不对齐的bug只会出现在chrome上？！
而学校方面总是推荐我们使用chrome浏览器——

看来要采取最一针见血的方法了——查看网页源代码

发现这个布局是用html table弄的，不是推行的响应式设计模式，自己也便尝试用自己所掌握的CSS3知识，希望可以破解这个bug~~

去掉table，用section改下，加label，浮动，父元素围住浮动，居中，宽度分配 ……

（几个小时之后）

呃，依旧无法解决问题，最终得到的结果依旧差强人意

第二天，去图书馆里重新捡起了自己当初拜读的《CSS设计指南（第3版）》，p10里面有句话点醒了我，“几乎所有HTML元素的display属性值要么为block，要么为inline。最明显的一个例外是table元素，它有自己特殊的display属性值。”
自己琢磨了这么老半天，真是切身体验到了table元素下盒子模型的诡异——自己完全对其大小琢磨不透的。看来得继续看书，于是又在图书馆里找了本《HTML+CSS标签速查效率手册》，在里面发现有关于html table的较为完备的介绍。就把这章读了，得到的收获就是——

     <td>标签下的内容默认居中方式是靠左垂直居中的。于是，也便理解了“用户”字段和“阅览用户”字段两者正常情况下的排布，如下——
   
   

   而chrome中缩放网页一下，就变成这样（另外也注意到，<td>下直接放字段的话是没有盒子模型的）

而同样的网页代码缩放的话在edge、firefox、360中不会出现这种情况，edge目前的内核是EdgeHTML，firefox的内核是Gecko，我用的360安全浏览器是Trident+Blink。如果只是因为内核不同，渲染出的效果导致的话，那可以解释为chrome自身的bug。可是360用的内核中Trident是用来兼容IE的，Blink则来源于chrome的chromium的blink。难道是360他们进行了优化？？？

好吧，分析到这里，可以初步判定是chrome浏览器渲染引擎在处理包含多个子元素的<tb>标签时，子元素的对齐方式随缩放比例而产生不一致这一个bug了。

自己到时就把咱们内部网网页上的这个小角落发生的bug到chromium开发组邮件列表里反馈一下吧<(￣ˇ￣)/

——

所以，到头来，问题依旧没有解决。

也罢，自己就让内部网的网页缩放在110%好了，样式刚好不会错乱，大小还是合适

——

这封信件也算给网页开发者你们信息中心某位人士的反馈吧，虽然还真不影响到内部网的日常使用（挺好奇的是，你们是用dreamweaver写的吗?表格布局——

End

祝好~~~

Answer 1

用‘ctrl+’， ‘ctrl-’找table的麻烦，你还是去问浏览器好一点