html - “display table-cell” 增加/减少浏览器缩放时高度不同

Question

大家好，当我增加或减少浏览器的缩放比例时，我在显示使用 div + css 构建的表格时遇到问题。带有图像的单元格(从高度到行)的大小增加或减小，我不明白为什么。图像为 35x35px，单元格的顶部和底部填充为 10px。这是问题的屏幕截图和一些源代码。我真的不知道为什么会有这种行为

编辑:附加信息，表格在 <iframe> 中元素

    .table-custom {
        font-size: 12px;
        display: table;
        width: 100%;
    }
    .table-row {
        display: table-row;
        color: #333;
    }
    .col {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 3px;
        border-bottom: 2px solid #666;
    }
    .col-1 {
        width: 25%;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
    }
    .col-2 {
        width: 15%;
    }
    .col-2 img{

        width: 35px;
        height: 35px;
    }
    .col-3 {
        width: 60%;
    }

    <div class="table-custom">
    	<div class="table-row clearfix">
    		<div class="col col-1">
    			<a href="...">sometxt</a>
    		</div>
    		<div class="col col-2">
    			<a href="..."> <img class="sua" src="https://i.imgur.com/wxROuzQ.png"> </a>
    		</div>
    		<div class="col col-3">
    			<a href="...">sometxt</a>
    		</div>
    	</div>
        <div class="table-row clearfix">
    		<div class="col col-1">
    			<a href="...">sometxt</a>
    		</div>
    		<div class="col col-2">
    			<a href="..."> <img class="sua" src="https://i.imgur.com/wxROuzQ.png"> </a>
    		</div>
    		<div class="col col-3">
    			<a href="...">sometxt</a>
    		</div>
    	</div>
    </div>

Answer 1

如果您放大或缩小浏览器，它会增加或减少所有元素。但是，当您调整浏览器窗口大小时，它不会那样做。一切都保持不变。如果宽度和高度的单位是百分比，则调整为屏幕的宽度和高度。