放大和缩小时，Chrome 中的表格行高和列表行高问题

Question

当浏览器为 100% 时，这是第一张图片

在第二个图像中，当浏览器为 90% 或 110% 或 120% 时

ul{
			margin: 0px;
			}
			ul li{
			list-style-type: none;
			height: 32px;
			line-height: 32px;
			border-bottom: 1px solid #ddd;
			width: 200px;
			}
			.Left {
				float: left;
				border-right: 1px solid #ddd;
			}
			tr td{
				text-decoration: none;
				height: 28px;
				line-height: 28px;
				border-bottom: 1px solid #ddd;
				width: 100px;
				padding-left: 5px;
				position: relative;
				left: -2px;
			}
			table thead tr th {
				display: none;
			}
			a{
				text-decoration: none;
			}

<div>
			<div class="Left">
				<div class="title">
					<ul>
						<li><a href="#">Header</a></li>
					</ul>
				</div>
				<div>
					<ul>
						<li><a href="#">Name1</a></li>
						<li><a href="#">Name2</a></li>
						<li><a href="#">Name3</a></li>
						<li><a href="#">Name4</a></li>
						<li><a href="#">Name5</a></li>
						<li><a href="#">Name6</a></li>
					</ul>
				</div>
			</div>
			<div>
				<div>
					<table>
						<thead>
							<th>
								<td>
									<a href="#">Status</a>
								</td>
							</th>
						</thead>
						<tbody>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
							<tr>
								<td><a href="#">Status1</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

这是我的 html 和 css 代码，上面还添加了屏幕截图。 此问题仅在其他浏览器中的Chrome浏览器中出现，没有问题。我检查了其他浏览器。

任何人都可以帮助我解决这个问题。 谢谢。

Answer 1

诀窍是确保左侧的结构与右侧的结构具有相同的指标。因此，填充，行高，高度等没有差异。有点像这样：

/* make sure the ul and the table have the same metrics */
.Left ul, table {
border-spacing: 0;
border: 0;
margin: 0;
}
/* ditto for the list items and table cells */
.Left li, td {
box-sizing: content-box;
line-height: 32px;
border-bottom: 1px solid #ddd;
margin: 0;
padding: 0;
}

ul li {
list-style-type: none;
width: 200px;
}
.Left {
float: left;
border-right: 1px solid #ddd;
}
tr td {
text-decoration: none;
width: 100px;
padding-left: 5px;
}
table thead tr th {
display: none;
}
a {
text-decoration: none;
}

<div>
<div class="Left">
<div class="title">
<ul>
<li><a href="#">Header</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">Name1</a></li>
<li><a href="#">Name2</a></li>
<li><a href="#">Name3</a></li>
<li><a href="#">Name4</a></li>
<li><a href="#">Name5</a></li>
<li><a href="#">Name6</a></li>
</ul>
</div>
</div>
<div>
<div>
<table>
<thead>
<td>
<a href="#">Status</a>
</td>
</thead>
<tbody>
<tr>
<td><a href="#">Status1</a></td>
</tr>
<tr>
<td><a href="#">Status1</a></td>
</tr>
<tr>
<td><a href="#">Status1</a></td>
</tr>
<tr>
<td><a href="#">Status1</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

不过，这并没有我预期的那么好;在某些缩放系数上仍然存在差异。可能是我忘记了一个或多个属性;当我想到一些我会更新。

Answer 2

这是一个解决方案，我只修改了 CSS
：(并在 HTML 中做了一些更正，因为td不应该在th中(

.Left, ul, li, table, tr, td {
margin: 0;
padding: 0;
border-collapse: collapse;
border: 0;
}
.Left {
float: left;
border-right: 1px solid #ddd;
}
li {
width: 200px;
}
td {
width: 100px;
}
table thead {
display: none;
}
li,
td {
height: 28px;
line-height: 28px;
list-style-type: none;
border-bottom: 1px solid #ddd;
margin: 0;
padding: 0 0 0 8px;
}
a {
text-decoration: none;
}

<div>
<div class="Left">
<div class="title">
<ul>
<li><a href="#">Header</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">Name1</a></li>
<li><a href="#">Name2</a></li>
<li><a href="#">Name3</a></li>
<li><a href="#">Name4</a></li>
<li><a href="#">Name5</a></li>
<li><a href="#">Name6</a></li>
</ul>
</div>
</div>
<div>
<div>
<table>
<thead>
<th>
<!-- td NOT NECESSARY -->
<a href="#">Status</a>
<!-- /td NOT NECESSARY -->
</th>
</thead>
<tbody>
<tr>
<td><a href="#">Status1</a></td>
</tr>
<tr>
<td><a href="#">Status1</a></td>
</tr>
<tr>
<td><a href="#">Status1</a></td>
</tr>
<tr>
<td><a href="#">Status1</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

我在桌子上使用了border-collapse: collapse;，这样单元格之间就没有空间了。这样，我们可以为li和td元素设置相同的高度。