为什么我的网页中的最后一个div在计算机和电话上具有不同的高度?
我将此网页 http://imaginary.freeasphost.net.net/instruments/
上一个Div Element当我在计算机上打开此页面时,按钮下面的边框。我有Edge,Chrome,Firefox和Opera。
当我打开电话小米Redmi 8时,底部边框在按钮上方,它们会从部分泄漏。我有Firefox,Chrome和Mi浏览器。我在其他手机上检查了它,互联网朋友在不同的手机上也检查了一下,所有手机都有同样的问题。 DIV在计算机和电话上具有不同的高度。
我尝试将盒子大小从边界盒子更改为填充盒和内容框,并使用了Moz和Webkit CSS属性,这无济于事。
这是它在计算机上的外观以及我想要的外观:在此处
和 电话:在此处输入图像说明
以下是 这与手机上的浏览器一样,因此我不必始终上传页面来检查电话的外观吗?我知道Chrome,Firefox等具有开发人员工具,我可以在手机上检查它的外观,但是在这种情况下,所有内容都看起来不错,但是在真实的电话上,CSS的行为不同。
I make this webpage http://imaginary.freeasphost.net/Instruments/
Last div element has bottom border below buttons, when I open this page on computer. I have Edge, Chrome, Firefox and Opera.
When I open in on phone Xiaomi Redmi 8, bottom border is above buttons and they leak from section. I have Firefox, Chrome and Mi Browser. I checked it on other phones and internet friends checked it too, on different phones and there is same problem on all phones. Div has different heights on computer and phone.
I tried to change box-sizing, from border-box, to padding box and content-box and used moz and webkit css properties and it did not help.
Here is how it looks on computer and how I want that it looks: enter image description here
And here is how it looks like on phone: enter image description here
EDIT: Is there browser for windows that behaves like browser on phone, so that I do not have to always upload page to check how it looks like on phone? I know that chrome, firefox etc have developer tools where I can check how it will look on phone, but in this case everything looks good there, but on real phone css behaves differently.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在第1029行,将高度更改为最小值。应该解决它
On line 1029, change height to min-height. That should fix it