皮宅 2024-09-22 01:33 采纳率: 50%
浏览 13
已结题

HTML中css的位置信息居然会导致元素大小发生变化

HTML样式很奇怪的问题，只有位置坐标不同却导致了一摸一样的元素大小发生变化

<!DOCTYPE html>
<html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title></title>
    <style>

        .tm-header:hover {
            border: none !important;
        }

        .jdtbox1 {
            padding: 10px;
            box-sizing: border-box;
            height: 100%;
            position: relative;
            resize: none !important;
        }

        .jdt {
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
            min-height: 50px;
            resize: none !important;
        }

        .tkhp {
            display: flex !important;
            justify-content: flex-start;
            gap: 0 !important;
        }

        .tkhp > div {
            margin-right: 20px;
        }

        .tkhp > div:last-child {
            margin-right: 0;
        }

        .tmbox {
            display: block !important;
            box-sizing: border-box;
            padding: 0mm 1mm;
            font-family: 宋体, SimSun, STSong;
            font-size: 5.8mm;
            width: 100%;
            font-weight: bold;
            height: 15mm;
            text-align: center;
            word-break: break-all;
            color: rgb(0, 0, 0);
            position: relative;
        }

        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .page-wrapper-item {
            width: 100%;
            overflow: hidden;
            position: relative;
            background: #ffffff;
        }

        .wrap-1 {
            height: 22mm;
            -webkit-border-image: url(https://www.zhixue.com/freshanswersheet/3137/module/global/image/scoreBorderSide.jpg) 0 1;
            border-image: url(https://www.zhixue.com/freshanswersheet/3137/module/global/image/scoreBorderSide.jpg) 0 1;
            border-top: 0;
            border-bottom: 0;
            border-right: 0;
            border-left: 1px solid;
        }

        .inner-1 {
            background: url(https://www.zhixue.com/freshanswersheet/3137/module/global/image/scoreBorder.jpg) no-repeat;
            background-size: cover;
            top: 0mm;
            left: 166mm;
            width: 10mm;
            height: 10mm;
            border: none;
            z-index: 1;
            float: left;
            margin: 6mm 2mm;
        }

        .xtLthbox {
            display: flex;
            flex-wrap: wrap;
        }

        .itemtk {
            position: relative;
            display: flex;
            flex-direction: column;
            margin: 5px 0;
            padding: 0 5px;
            box-sizing: border-box;
        }

        .linetk {
            border-bottom: 1px solid black;
            flex: 1 1 0%;
        }

        .syXzBox {
            text-align: center;
            display: inline-block;
            width: 20px;
            line-height: 10px;
            border: 1px solid black;
            margin-right: 2px;
        }

        .hhtJdtQh {
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
        }

        .syTkGz {
            text-align: center;
            position: absolute;
            right: 0;
            top: -7px;
            width: 10mm;
            height: 5mm;
            line-height: 5mm;
            border: solid 1px #000;
            background-color: #fff;
            font-size: 15px;

            span {
                display: none !important;
            }
        }

        .syTkGzSpan {
            display: none !important;
        }

        .jdtcz {
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            flex-direction: column-reverse;
            z-index: 2;
        }

        .hhtcz {
            display: none;
            position: absolute;
            right: 0;
            top: 20px;
            flex-direction: column-reverse;
            z-index: 2;
        }

        .syPfMs2 {
            width: 10mm;
            height: 5mm;
            margin: 6mm 2mm;
            border: solid 1px;
            background-color: #fff;
            z-index: 1;
        }

        .syPfMs3 {
            width: 25mm;
            position: absolute;
            height: 4.8mm;
            top: 0;
            right: 0;
            text-align: right;
            border-left: 1px solid black;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
        }

        .rightg {
            width: 8mm;
            height: 4.8mm;
            display: inline-block;
            text-align: center;
            background: url("../img/right.svg") center no-repeat !important;
        }

        .notRight {
            width: 8mm;
            height: 4.8mm;
            display: inline-block;
            border-left: 1px solid black;
            border-right: 1px solid black;
            text-align: center;
            background: url("../img/notright.svg") center no-repeat !important;
        }

        .wrong {
            width: 8mm;
            height: 4.8mm;
            display: inline-block;
            text-align: center;
            background: url("../img/wrong.svg") center no-repeat !important;
        }

        .zpg {
            color: #999999;
            font-size: 20px;
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .grid-container {
            box-sizing: border-box;
            width: 100%;
            height: 16px;
            line-height: 16px;
            display: flex !important;
            grid-template-columns: repeat(22, 1fr);
            border-top: 1px solid #000;
            border-left: 1px solid #000;
        }

        .grid-item {
            border-right: 1px solid #000;
            text-align: center;
            width: 100%;
        }

        .flex-ms {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .grid-container1 {
            box-sizing: border-box;
            width: 100%;
            height: 16px;
            line-height: 16px;
            display: flex !important;
            grid-template-columns: repeat(22, 1fr);
            border-bottom: 1px solid #000;
            border-top: none;
            border-left: none;
        }

        .grid-item1 {
            border-right: 1px solid #000;
            text-align: center;
            width: 100%;
        }

        .grid-item1:last-child {
            border-right: none;
        }

        .flex-ms1 {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .syhhttktpf {
            position: relative;
            left: 2px;
            bottom: 5px;
            display: inline-block;
            width: 10mm;
            height: 5mm;
            border: solid 1px #000;
            background-color: #fff;
        }

        .pageBox {
            width: 100%;
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            padding: 0 50px;
        }

        .cellpage {
            padding: 60px 0;
        }

        .textareaBt {
            display: none;
        }

        .innerbox {
            width: 100%;
            margin: 10px auto;
        }

        .box-drag {
            position: relative;
            font-size: 12px;
            overflow: hidden;
            height: 100%;
        }

        .xz {
            border: 1px solid black;
            padding: 10px;
            box-sizing: border-box;
            position: relative;
            display: flex;
            flex-wrap: wrap;
        }

        .topic_obj_item {
            display: flex;
            flex-direction: row;
            text-align: center !important;
        }

        .xtcls {
            display: flex;
            flex-direction: column;
        }

        .topic_obj_item1 {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
        }

        .topic_obj_item3 {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .space {
            width: 100%;
            border-right: 1px solid black;
            box-sizing: border-box;
        }

        .outer {
            &:not(:last-child) .space {
                display: block;
            }

            &:last-child .space {
                display: none;
            }
        }

        .zw-wrap {
            box-sizing: border-box;
            width: 100%;
            min-height: 150px;
        }

        .ywzw {
            border: 1px solid black;
            padding: 10px;
        }

        .word-count {
            top: 30px;
            position: relative;
            display: flex;
            font-size: 7px;
            white-space: nowrap;
        }

        .yyzw {
            border: 1px solid black;
            padding: 10px;
            box-sizing: border-box;
        }

        .jdtborder > div:last-child {
            border-bottom: 1px solid black;
        }

        .tk {
            width: 100%;
            border: 1px solid black;
            padding: 10px;
            box-sizing: border-box;
            resize: none !important;
        }

        .tksp {
            display: flex;
            flex-wrap: wrap;
        }

        .hhtLi {
            margin-bottom: 5px;
        }

        .hhtbox {
            min-height: 50px;
            display: block !important;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
            resize: none !important;
            overflow: hidden;
        }

        .hhtbox:last-child {
            border-bottom: 1px solid black;
        }

        .hhtbox1 {
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
            overflow: hidden;
        }

        .hhtbox1:last-child {
            border-bottom: 1px solid black;
        }

        .cz {
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            flex-direction: column-reverse;
            z-index: 12;
        }

        .active {
            display: flex;
        }

        .number-container {
            display: inline-flex;
            flex-wrap: wrap;
        }

        .number-box {
            border: 1px solid black;
            padding: 1px 3px;
            margin: 0 5px;
        }

        .page-wrapper {
            position: relative;
            height: 297mm;
            width: 210mm;
        }

        .tmbox {
            display: block;
        }
    </style>
</head>
<body>
<div style="display: flex; top: 0mm; left: 0mm; position: absolute;" class="zoomDiv">
    <div class="page-wrapper" style="box-sizing: border-box; position: relative; height: 297mm; width: 210mm;">
        <div style="z-index:30;position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:3.5mm" class="ymClass">第1页，共4页
        </div>
        <div class="locatePoint" style="top:11mm;left:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
        <div class="locatePoint" style="top:49.5mm;left:6mm;width:2mm;height:5mm;position:absolute;background-color:black;display:block"></div>
        <div class="locatePoint" style="top:99mm;left:6mm;width:2mm;height:5mm;position:absolute;background-color:black;display:block"></div>
        <div class="locatePoint" style="top:148.5mm;left:6mm;width:2mm;height:5mm;position:absolute;background-color:black;display:block"></div>
        <div class="locatePoint" style="top:198mm;left:6mm;width:2mm;height:5mm;position:absolute;background-color:black;display:block"></div>
        <div class="locatePoint" style="top:247.5mm;left:6mm;width:2mm;height:5mm;position:absolute;background-color:black;display:block"></div>
        <div class="locatePoint" style="top:281mm;left:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
        <div style="z-index:99999;top:281mm;left:70mm;width:42mm;height:5mm;position:absolute;" class="pageIndex">
            <div>
                <div style="width:5mm;height:5mm;background-color: white;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
            <div>
                <div style="width:5mm;height:5mm;background-color: white;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
            <div>
                <div style="width:5mm;height:5mm;background-color: white;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
            <div>
                <div style="width:5mm;height:5mm;background-color: black;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
        </div>
    </div>
    <div class="page-wrapper" style="box-sizing: border-box; position: relative; height: 297mm; width: 210mm;">
        <div style="z-index:30;position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:3.5mm" class="ymClass">第2页，共4页
        </div>
        <div class="locatePoint" style="top:11mm;right:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block;z-index:30;"></div>
        <div class="locatePoint" style="top:281mm;right:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block;z-index:30;"></div>
        <div style="z-index:99999;top:281mm;left:70mm;width:42mm;height:5mm;position:absolute;" class="pageIndex">
            <div>
                <div style="width:5mm;height:5mm;background-color: white;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
            <div>
                <div style="width:5mm;height:5mm;background-color: white;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
            <div>
                <div style="width:5mm;height:5mm;background-color: white;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
            <div>
                <div style="width:5mm;height:5mm;background-color: black;float: left;box-sizing:border-box; border: 2px black solid;margin-left: 2mm;">
                </div>
                <div style="border-right: 1px solid black;transform: rotate(-44deg); -webkit-transform: rotate(-44deg);left: -10px;position: relative;top: -2px;width: 1px;height: 24px;float: left;">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 转义结束标签 -->



</body></html>

html如上，如果将其打开在两个窗口中，会发现右下角和左下角的两个黑点一摸一样

img


但是在将开头的div中的位置修改为：

<div style="display: flex; top: 297mm; left: 0mm; position: absolute;" class="zoomDiv">

之后，就是将top从0修改为297，居然导致黑点的大小发生了变化：

img


这个问题是如何产生的？怎么解决？

  • 写回答

24条回答 默认 最新

  • Seal^_^ 云原生领域优质创作者 2024-09-22 17:47
    关注
    获得0.75元问题酬金

    🍀🍀🍀本答案参考ChatGPT，并由Seal^_^整理回复。

    在HTML和CSS中，元素的大小变化通常不会仅仅由于改变其position属性中的top值而发生，除非这种变化间接地影响了其他CSS属性或布局上下文。然而，根据你描述的情况，这里有几个可能的原因和解决方案：

    1. 父元素或容器的影响

    如果.zoomDiv的父元素或任何祖先元素使用了与位置相关的布局（如position: relative;），改变.zoomDiv的top值可能会改变其相对于视口或父元素的定位，但这通常不会直接影响其大小。然而，如果父元素的大小或布局因为某些原因（如滚动条的出现）而受到影响，那么这可能会间接影响.zoomDiv的大小（如果.zoomDiv的大小依赖于父元素的大小）。

    2. 浏览器渲染差异

    在某些情况下，浏览器可能会因为渲染引擎的差异而表现不同。但是，对于简单的元素大小改变来说，这通常不是主要原因。

    3. CSS继承或覆盖

    如果.zoomDiv或其子元素（包括黑点）的样式被其他CSS规则所覆盖或继承，这可能会改变它们的表现。检查是否有其他CSS规则（可能来自外部样式表或内联样式）影响了黑点的样式。

    4. 视图区域或缩放的影响

    如果页面在修改top值后发生了滚动，或者因为滚动条的出现/消失而改变了视口大小，这可能会间接影响元素的渲染大小。

    解决方案

    • 检查父元素：确保.zoomDiv的父元素和所有祖先元素都没有因为.zoomDiv的top值变化而受到影响。
    • CSS审查：使用浏览器的开发者工具（如Chrome的DevTools）来检查黑点的实际CSS属性。查看是否有任何意外的CSS规则被应用。
    • 清除缓存：有时候浏览器缓存的旧CSS文件可能会导致意外的渲染问题。尝试清除浏览器缓存或强制刷新页面。
    • 简化问题：尝试创建一个最小的可复现代码示例，只包含必要的HTML和CSS来复现这个问题。这有助于隔离问题并找到解决方案。
    • 检查媒体查询：如果你的CSS中包含了媒体查询，确保没有媒体查询因为视口大小的变化而改变了黑点的样式。

    最后，如果上述方法都不能解决问题，请提供更详细的代码示例，包括完整的HTML和CSS，以便进行更深入的分析。

    评论

报告相同问题？

问题事件

  • 系统已结题 9月30日
  • 创建了问题 9月22日

悬赏问题

  • ¥30 stm32f103c8t6制作万能红外遥控器
  • ¥15 有人会fastcrud写前端页面吗
  • ¥15 如何解除Uniaccess管控
  • ¥15 微信小程序跳转关联公众号
  • ¥15 Java AES 算法 加密采用24位向量报错如何处理？
  • ¥15 使用X11可以找到托盘句柄，监控到窗口点击事件但是如何在监听的同时获取托盘中应用的上下文菜单句柄
  • ¥45 字符串操作——数组越界问题
  • ¥15 Loss下降到0.08时不在下降调整学习率也没用
  • ¥15 QT+FFmpeg使用GPU加速解码
  • ¥15 为什么投影机用酷喵播放电影放一段时间就播放不下去了？提示发生未知故障，有什么解决办法吗？