tuna/mirror-web

[Bug Report] footerwrap在页面中不恰当位置显示

Jerry12228 opened this issue · 2 comments

Jerry12228 commented

当用鼠标拖拽选中页面内文本后, 页面中会出现第二个id为footerwrap的div标签, 挡住页面使部分页面内容无法显示

1662049874750.mp4
Crystal-RainSlide commented

看了一下这里的视频和 tuna/issues#1770 的截图，结合前端仍在使用早就停止维护的 Bootstrap 3 https://github.com/tuna/mirror-web/blob/225e67c3165106eb03a9ef1030d593c4c42549ce/static/css/bootstrap.min.css ，而 Bootstrap 3 的网格就是用 Float 布局做的，怀疑是 Float 布局 clear 失效的问题。

于是，我试着禁用了网页上的 bootstrap.min.css 里下边这条 clear 的规则（F12 - 查看器 - .container::after 伪元素 - 样式）：

.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after,
.container-fluid::after, .container::after, .dl-horizontal dd::after,
.form-horizontal .form-group::after, .modal-footer::after, .modal-header::after,
.nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after,
.pager::after, .panel-body::after, .row::after {
	clear: both;
}

果然，达到了一样的效果。

理论上这是可以修的，但实践上修理历史遗留问题并不值得。建议直接换到最新的 Bootstrap 5，已经改成基于 Flexbox 布局的网格了，还支持启用 CSS Grid 布局来代替网格系统。

Harry-Chen commented

看了一下这里的视频和 tuna/issues#1770 的截图，结合前端仍在使用早就停止维护的 Bootstrap 3 https://github.com/tuna/mirror-web/blob/225e67c3165106eb03a9ef1030d593c4c42549ce/static/css/bootstrap.min.css ，而 Bootstrap 3 的网格就是用 Float 布局做的，怀疑是 Float 布局 clear 失效的问题。

于是，我试着禁用了网页上的 bootstrap.min.css 里下边这条 clear 的规则（F12 - 查看器 - .container::after 伪元素 - 样式）：

.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after,
.container-fluid::after, .container::after, .dl-horizontal dd::after,
.form-horizontal .form-group::after, .modal-footer::after, .modal-header::after,
.nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after,
.pager::after, .panel-body::after, .row::after {
	clear: both;
}

果然，达到了一样的效果。

感谢定位！

理论上这是可以修的，但实践上修理历史遗留问题并不值得。建议直接换到最新的 Bootstrap 5，已经改成基于 Flexbox 布局的网格了，还支持启用 CSS Grid 布局来代替网格系统。

是的，我们也想升级，不过现在大家没有足够的时间逐一检查和修复由于升级带来的问题，所以一直搁置了