在一篇关于前端开发的博客中，作者遇到了一个浏览器渲染问题。具体表现为表格的宽度在某些情况下会偏离其直接容器的宽度一个像素，尤其是在Chrome浏览器的特定版本中。尽管设置了表格宽度为100%，但与具有固定宽度的兄弟div.info的边框对齐时会出现一像素的偏差。这个问题在IE10和Firefox中未被复现，可能是一个特定浏览器的渲染误差。作者探讨了CSS样式如`width`, `border-collapse`和`word-break`等可能的影响，并寻求解决方案。
我在另一个div内的div中有一个表.直接容器的宽度为40％,我希望表格与此div一样宽,设置宽度：100％.
相关标记
这在大多数情况下都有效,但是根据浏览器窗口的宽度,表格的宽度有时会偏离一个像素：
如右图所示,边框是兄弟div .info左侧的一个像素.这些边界应该对齐.
相关的CSS
#userListContainer{width: 40%; float: left; }
.info{display:block;line-height:22px; height:22px; padding-left:10px; }
#userListContainer .info {border-right: 1px solid #999999;}
.userList {
width: 100%;
border-right: 1px solid #999999;
word-break: break-all; border-spacing: 0;
border-collapse: separate;
}
对我来说似乎是一个渲染错误.它出现在Chrome 34.0.1847.131中,而不是IE10中.我无法在IE10或当前版本的FireFox中重现它.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
