mirror-web icon indicating copy to clipboard operation
mirror-web copied to clipboard

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

Open Jerry12228 opened this issue 3 years ago • 2 comments

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

https://user-images.githubusercontent.com/86408775/187965987-d498de2b-e021-4fd1-a4c3-98d49085d88f.mp4

Jerry12228 avatar Sep 01 '22 16:09 Jerry12228

看了一下这里的视频和 https://github.com/tuna/issues/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。 5 已经改成基于 Flexbox 布局的网格了,还支持启用 CSS Grid 布局来代替网格系统。

Crystal-RainSlide avatar Jun 24 '23 19:06 Crystal-RainSlide

看了一下这里的视频和 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 avatar Jun 25 '23 01:06 Harry-Chen